@charset "utf-8";

/* open-sans-regular - latin */
@font-face { 
  font-display: swap;
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/open-sans-v44-latin-regular.woff2') format('woff2'); 
  /* Beispiel: Nur Zeichen für Lateinische Kleinbuchstaben und Großbuchstaben */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
/* open-sans-italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/open-sans-v44-latin-italic.woff2') format('woff2'); 
  /* Beispiel: Nur Zeichen für Lateinische Kleinbuchstaben und Großbuchstaben */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD; 
}
/* open-sans-600 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/open-sans-v44-latin-600.woff2') format('woff2'); 
  /* Beispiel: Nur Zeichen für Lateinische Kleinbuchstaben und Großbuchstaben */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD; 
}
/* open-sans-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/open-sans-v43-latin-700.woff2') format('woff2'); 
  /* Beispiel: Nur Zeichen für Lateinische Kleinbuchstaben und Großbuchstaben */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD; 
}
/* open-sans-800 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/open-sans-v44-latin-800.woff2') format('woff2'); 
  /* Beispiel: Nur Zeichen für Lateinische Kleinbuchstaben und Großbuchstaben */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* roboto-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-v49-latin-regular.woff2') format('woff2'); 
/* Beispiel: Nur Zeichen für Lateinische Kleinbuchstaben und Großbuchstaben */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD; 
}
/* roboto-italic - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-v49-latin-italic.woff2') format('woff2'); 
/* Beispiel: Nur Zeichen für Lateinische Kleinbuchstaben und Großbuchstaben */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD; 
}
/* roboto-600 - latin */
@font-face { 
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/roboto-v49-latin-600.woff2') format('woff2'); 
/* Beispiel: Nur Zeichen für Lateinische Kleinbuchstaben und Großbuchstaben */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD; 
}
/* roboto-700 - latin */
@font-face {
  font-display: swap; 
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-v49-latin-700.woff2') format('woff2'); 
/* Beispiel: Nur Zeichen für Lateinische Kleinbuchstaben und Großbuchstaben */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}

/* roboto-800 - latin */
@font-face { 
  font-display: swap;
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/roboto-v49-latin-800.woff2') format('woff2'); 
/* Beispiel: Nur Zeichen für Lateinische Kleinbuchstaben und Großbuchstaben */
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD; 
}

/* KEYFRAMES */
@keyframes shake {
  10%,
  90% {
    transform: translate3d(-1px, -1px, 0);
  }
  20%,
  80% {
    transform: translate3d(2px, 2px, 0);
  }
  30%,
  50%,
  70% {
    transform: translate3d(-4px, -2px, 0);
  }
  40%,
  60% {
    transform: translate3d(4px, 2px, 0);
  }
}
@keyframes tel-ring {
  5% {
    transform: rotate3d(0, 0, 1, -15deg);
  }
  10% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
  15% {
    transform: rotate3d(0, 0, 1, -15deg);
  }
  20% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
  25% {
    transform: rotate3d(0, 0, 1, -7deg);
  }
  30% {
    transform: rotate3d(0, 0, 1, 7deg);
  }
  35% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes tel-ring-2 {
  1% {
    transform: rotate3d(0, 0, 1, -15deg);
  }
  2% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
  3% {
    transform: rotate3d(0, 0, 1, -15deg);
  }
  4% {
    transform: rotate3d(0, 0, 1, 15deg);
  }
  5% {
    transform: rotate3d(0, 0, 1, -7deg);
  }
  6% {
    transform: rotate3d(0, 0, 1, 7deg);
  }
  7% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    transform: rotate3d(0, 0, 0, 0deg);
  }
}
@keyframes slide-circle-normal {
  0% {
    opacity: 0;
    transform: scale(0.1) rotate(0deg);
  }
  100% {
    opacity: 1;
    transform: scale(1.0) rotate(-15deg);
  }
}

@media all {
  :root {
    /* Petrolblau DUB-GmbH */
    --blau-dunkel: #0b394c;
    --blau-dunkel-mittel: #2A5266;
    --blau: #306a85;
    --blau-mittel: #70aac6;
    --blau-hell: #9ccad8;
    --blau-hell-hell: #cde9ee;
    --blau-hell-hell-ganz: #e9f7fa;
    /* Salbei-Grün */
    --gruen-dunkel-dunkel: #3a5048;
    --gruen-dunkel: #4f6359;
    --gruen: #8cb795;
    --gruen-mittel: #d5e6c3;
    /* --gruen-mittel: #b7d1b5; */
    --gruen-hell: #f2fadd;
    --gruen-hell-hell: #eff2ee;
    --gruen-hell-hell-ganz: #f7fcec;
    --gruen-hell-hell-hauch: #fcfef7;
    /* Gelb */
    --gelb-orange: #f49d22;
    --gelb-dunkel: #ffc220;
    --gelb-mittel: #f1de59;
    --gelb-hell: #fdf19a;
    --gelb-hell-hell: #fef4bc;
    --gelb-hell-heller: #fef9db;
    --gelb-hell-am-hellsten: #fffdf5;
    /* Sand-Braun */
    --braun-dunkel: #807c6b;
    --braun: #d1cebb;
    --braun-mittel: #eee9d6;
    --braun--hell: #fdfbe7;
    --braun-hell-hell: #fcfcec;
    /* Rot */
    --rot-dunkel: #a11e21;
    --rot: #ea1d25;
    --rot-hell: #f9dcd3;
    /* Sonstiges */
    --bg-u2-hover: rgba(0, 0, 0, 0.20);
   --weiss: #fff;
    --schwarz: #000;
    --line: rgba(60, 83, 135, 0.18);
    --accent: #81aecc;

    /* Motion */
    --anim: 460ms;
    --anim-fast: 0.2s;
    --anim: 0.35s;
    --anim-slow: 0.6s;
    --easing: cubic-bezier(0.2, 0.7, 0.2, 1);

    --submenu-max: 100vh;

    /* --container: 1200px; */
    --border-farbe: rgba(255, 255, 255, 0.2);
    --border-test: 1px solid red;
    --box-shadow: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.2);
    --box-shadow-2: 0 0.2rem 0.6rem rgba(0, 0, 0, 0.5);
    --focus: #81aecc;
    --gap: 16px;
    --thumbW: 72px;

    /* NAV als Overlay-Container direkt unter Topbar */
    --topbar-h: 50px;

    /* Basiswerte für Schriftgrößen */
    /* font-size: clamp(Minimum, Bevorzugt, Maximum); */
    --step--2: clamp(0.75rem, 0.70rem + 0.25vw, 0.875rem);
    --step--1: clamp(0.9rem, 1rem + 0.4vw, 1.0rem);
    --step-0:  clamp(1rem, 1rem + 0.5vw, 1.2rem);
    --step-1:  clamp(1.1rem, 1.10rem + 0.8vw, 1.3rem);
    --step-2:  clamp(1.4rem, 1.30rem + 1vw, 2rem);
    --step-3:  clamp(1.8rem, 1.80rem + 1.5vw, 2.55rem);
    --step-4:  clamp(2.2rem, 2.20rem + 2vw, 3.25rem);
    --step-5:  clamp(3rem, 2.60rem + 3vw, 4rem);
  }

  /* Reset */
  *::before,
  *::after {
    box-sizing: border-box;
  }

  * {
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
  }
  img {
    border: 0;
    width: 100%;
    height: auto;
  }
  figure {
    display: block;
    margin: 0;
    unicode-bidi: normal;
  }

  html,
  body,
  div,
  span,
  applet,
  object,
  iframe,
  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  blockquote,
  pre,
  a,
  abbr,
  acronym,
  address,
  big,
  cite,
  code,
  del,
  dfn,
  em,
  img,
  ins,
  kbd,
  q,
  s,
  samp,
  small,
  strike,
  strong,
  sub,
  tt,
  var,
  b,
  u,
  i,
  center,
  dl,
  dt,
  dd,
  ol,
  ul,
  li,
  fieldset,
  form,
  label,
  legend,
  table,
  caption,
  tbody,
  tfoot,
  thead,
  tr,
  th,
  td,
  article,
  aside,
  canvas,
  details,
  embed,
  figure,
  figcaption,
  footer,
  header,
  hgroup,
  menu,
  nav,
  output,
  ruby,
  section,
  summary,
  time,
  mark,
  audio,
  video,
  main {
    font: inherit;
    vertical-align: baseline;
  }
  /* HTML5 display-role reset for older browsers */
  article,
  address,
  aside,
  details,
  main,
  figcaption,
  figure,
  footer,
  header,
  hgroup,
  menu,
  nav,
  section {
    display: block;
  }
  blockquote,
  q {
    quotes: none;
  }
  blockquote:before,
  blockquote:after,
  q:before,
  q:after {
    content: "";
    content: none;
  }
  table {
    border-collapse: collapse;
    border-spacing: 0;
  }
  /* Standard-Fokus-Ring entfernen, damit er nur bei Bedarf erscheint */
  *:focus:not(:focus-visible) {
    outline: none;
  }

  /* ~~~~~~~~~~~~~~~~~~ Zusammenfassungen ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  /* ~~~ transition  0.45s ease-in-out ~~~ */
  a,
  a:link,
  a:hover,
  a:focus-visible,
  .header .headerbar.klein .warenkorb-cont,
  .header .headerbar .warenkorb-cont, 
  #lupe-cont,
  #lupe-cont:checked + label,
  #lupe-cont:hover + label,
  #lupe-cont:focus-visible + label,
  #search-field,
  label[for="lupe-cont"],
  #lupe-cont:checked ~ #search-field,
  #pfeil-top a,
  #pfeil-top a:link,
  #pfeil-top a:focus-visible,
  #pfeil-top a:hover,
  .brand figure a,
  .brand figure a:link,
  .brand figure a:hover,
  .brand figure a:focus-visible,
  .burger-btn,
  .burger,
  .warenkorb a,
  .warenkorb a:link,
  .warenkorb a:hover,
  .warenkorb a:focus-visible,
  .trigger,
  .trigger:hover,
  .trigger:focus-visible,
  .card .weiter-link p a,
  .card .weiter-link p a:hover,
  .card .weiter-link p a:focus-visible,
  .card .weiter-link p a:hover::before,
  .card .weiter-link p a:focus-visible::before,
  .card:hover img,
  .card img,
  .nav-footer ul li a,
  .nav-footer ul li a:link,
  .nav-footer ul li a:hover,
  .nav-footer ul li a:focus-visible,
  .slider-01 .slick-prev::before,
  .slider-01 .slick-next::before,
  .slider-01 .slick-prev:hover::before,
  .slider-01 .slick-prev:focus-visible::before,
  .slider-01 .slick-next:hover::before,
  .slider-01 .slick-next:focus-visible::before,
  .slider-01 .slick-dots li button::before,
  .slider-01 .slick-dots li button:hover::before,
  .slider-01 .slick-dots li button:focus-visible::before,
  .nav-breadcrumb .breadcrumb li a,
  .nav-breadcrumb .breadcrumb li a:link,
  .nav-breadcrumb .breadcrumb li a:hover,
  .nav-breadcrumb .breadcrumb li a:focus-visible,
  .menge button,
  .menge button:hover,
  .menge button:focus-visible,
  .alsListe img,
  .alsListe:hover img,
  .alsListe .weiter-link p a,
  .alsListe .weiter-link p a:hover,
  .alsListe.weiter-link p a:focus-visible,
  .box .weiter-link p a:hover::before,
  .box .weiter-link p a:focus-visible::before,
  .shopping-cart td.remove-button::after,
  .shopping-cart td.remove-button:hover::after,
  .shopping-cart td.remove-button:focus-visible::after,
  .message-warenkorb .warenkorb-link a,
  .message-warenkorb .warenkorb-link a:link,
  .message-warenkorb .warenkorb-link a:hover,
  .message-warenkorb .warenkorb-link a:focus-visible,
  .u-head,
  .submenu2 li.akt .u-head,
  .u-head:hover,
  .u-head:focus-visible,
  .u-head.akt,
  .slider-bannerbild .slick-dots li button::before,
  .slider-01 .slick-dots li button::before,
  .slider-bannerbild .slick-dots li button:hover::before,
  .slider-bannerbild .slick-dots li button:focus-visible::before,
  .slider-01 .slick-dots li button:hover::before,
  .slider-01 .slick-dots li button:focus-visible::before,
  .cont-inhalt p a::after,
  .cont-inhalt li a::after,
  .cont-inhalt p a:hover::after,
  .cont-inhalt p a:focus-visible::after,
  .cont-inhalt li a:hover::after,
  .cont-inhalt li a:focus-visible::after,
  .u-head[data-has-sub="true"]::after,
  .u-head:hover[data-has-sub="true"]::after,
  .u-head:focus-visible[data-has-sub="true"]::after,
  .hotline a,
  .hotline a:link,
  .shop-link a,
  .shop-link a:link,
  .hotline a::before,
  .hotline a:link::before,
  .shop-link a::before,
  .shop-link a:link::before,
  .header .headerbar.klein .hotline a,
  .header .headerbar.klein .hotline a:link,
  .header .headerbar.klein .shop-link a,
  .header .headerbar.klein .shop-link a:link,
  .header .headerbar.klein .hotline a::before,
  .header .headerbar.klein .hotline a:link::before,
  .header .headerbar.klein .shop-link a::before,
  .header .headerbar.klein .shop-link a:link::before,
  .rahmen.faq,
  .rahmen.faq > .details.faq,
  .rahmen.faq > summary,
  .rahmen.faq[open] > summary,
  .rahmen.faq > summary:hover,
  .rahmen.faq > summary:focus-visible,
  .rahmen.faq[open] > summary::after,
  .toggle-suche-link,
  .toggle-suche-link:hover,
  .toggle-suche-link:focus-visible {
    transition: all 0.35s ease-in-out;
  }
  .card figure a:hover img,
  .card figure a:focus-visible img,
  .card.vorschau figure a:hover img {
    transform: scale(1.075, 1.075);
    cursor: pointer;
    transition: all 0.5s ease-in-out;
  }
  .header,
  .header.start,
  .header .headerbar .brand,
  .header .headerbar.klein .brand,
  .header .headerbar.klein,
  .header .headerbar.klein .nav-cont,
  .header .headerbar.klein .warenkorb-cont,
  .header .headerbar,
  .header .headerbar.start,
  .header .headerbar.start .nav-cont,
  .header .headerbar.start .warenkorb-cont,
  .header .headerbar .nav-cont {
    transition: all 0.15s ease-in-out;
  }

  /* ~~~~~~~~~~~~~~~~~~ Nur für Ausdrucken ~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  .logo-druck {
    display: none;
    position: realtive;
    background: var(--weiss);
    width: 100%;
  } 
  .logo-druck figure {
    width: 250px;
    margin: 30px 0 30px 10px;
  }
  
  /* ~~~~~~~~~~~~~~~~~~ Allgemein ~~~~~~~~~~~~~~~~~~~~~~~~~~ */

  html {
    font-size: 16px;
    line-height: 1.5;
  }
  html,
  body {
    width: 100%;
    height: 100%;
  }
  body {
    margin: 0;
    font-family:'Open Sans', Arial, Verdana, Helvetica, sans-serif;
    font-size: var(--step-1);
    line-height: 1.5;
    font-weight: 400;
    color: #000;
    hyphens: auto;
    /* hyphenate-limit-chars: auto 5;
    hyphenate-limit-chars: 4; */
    background-color: var(--weiss);
    letter-spacing: 0;
  }
  img {
    display: block;
    width: 100%;
    height: auto;
  }
  figure,
  picture {
    margin: 0;
  }
  ol,
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  input,
  select,
  textarea,
  button {
    font: inherit;
  }

:focus-visible {
  outline: 2px solid var(--schwarz);
  outline-offset: 3px;
}

  /* ~~~~~~ Fließtext ~~~~~~ */
  p {
    margin-bottom: 0.75rem;
    text-wrap: pretty;
  }

  /* ~~~~~ Überschriften gestaffelt ~~~~~~ */
  h1 { 
    font-size: var(--step-4); 
    line-height: 1.1; 
    font-weight: 600;
  }
  h2 { 
    font-size: var(--step-3); 
    line-height: 1.2; 
  }
  h1.sucheergebnis,
  h3 { 
    font-size: var(--step-2); 
    line-height: 1.3;
    text-transform: none;
  }
   h1.sucheergebnis { 
    text-align: center; 
  }
  h4 { 
    font-size: var(--step-2); 
    line-height: 1.35; 
  }
  h5 { 
    font-size: var(--step-1); 
    line-height: 1.4; 
  }
  h6 { 
    font-size: var(--step-0); 
    line-height: 1.4; 
  }
  h1,
  h2,
  h3,
  h4, 
  h5,
  h6 {
    text-wrap: balance;
    font-weight: 600;
  }
  h2,
  h3,
  h4, 
  h5,
  h6 {
    margin: 0.5rem 0 1.0rem 0;
  }
  h1,
  h2 {
    text-align: center;
  }
  h1 {
    text-transform: uppercase;
  }

  /* ~~~~~~ Schrift allgemein ~~~~~~ */
  small {
    font-size: var(--step--1);
  }
  .normal {
    font-weight: 400;
  }
  strong,
  .fett,
  .bold {
    font-weight: 800;
  }
  em {
    font-style: italic;
  }
  .umbruch {
    white-space: nowrap;
  }
  .zentriert {
    text-align: center;
  }
  hr {
    width: 100%;
    margin: 70px 0;
    border-bottom: 1px solid var(--blau-mittel);
  }

  /* ~~~~~~ "Links" ~~~~~~ */
  a,
  a:link {
    color: var(--blau-dunkel-mittel);
    font-weight: 600;
    text-decoration: none;
    max-width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word; /* Für ältere Browser */
  }
  a:hover,
  a:focus-visible {
    color: #000;
    text-decoration: underline;
  }
  #screenreader-jump a {
    display: inline-block;
    height: .1rem;
    left: -1000rem;
    overflow: hidden;
    position: absolute;
    top: -1000rem;
    width: .1rem;
    z-index: 5000;
  }

  /* ~~~~~~ Header ~~~~~~ */
  /* .header, */
  .header {
    position: relative;
    width: 100%;
    height: 200px;
    margin: 0 auto;
    background: #fff;
  }
  .header .headerbar {
    display: flex;
    justify-content: center;
    height: 120px;
    position: fixed;
    top: 80px;
    width: 100%;
    margin: 0 auto;
    z-index: 101;
    background: #fff;
  }
  .topbar {
    position: absolute;
    top: -70px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    height: 50px;
    gap: 0.75rem;
    padding: 0 140px 0 0;
    width: 100%;
    background: #fff;
  }
  .topbar ul {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .topbar ul li a,
  .topbar ul li a:link {
    font-size: 18px;
    color: #000;
    font-weight: 400;
    text-align: right;
    text-decoration: none;
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    transform: scale(1);
  }
  .topbar ul li.akt a,
  .topbar ul li a:hover,
  .topbar ul li a:focus-visible {
    color: #000;
    transform: scale(1.1);
  }
  .topbar ul li.akt a {
    font-weight: 800;
    transform: scale(1);
  }
  .topbar ul li {
    border-right: 1px solid var(--blau);
    border-left: none;
  }
  .topbar ul li:first-child {
    border-left: none;
  }

  /* ~~~~~~~~~~~~ Logo ~~~~~~~~~~~~ */

  .brand {
    position: absolute;
    left: 10px;
    top: -72px;
    z-index: 1200;
    margin-right: auto;
    width: 280px;
    transform-origin: 0% 0%;
    transform: scale(1);
  }
  .brand figure a,
  .brand figure a:link {
    display: block;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1300;
    transform: scale(1);
    transform-origin: center left;
  }
  .brand figure a:hover,
  .brand figure a:focus-visible {
    transform: scale(1.07);
    transform-origin: center left;
  }

  /* ~~~~~~~~~~~~ Warenkorb-Icon ~~~~~~~~~~~~ */
  .warenkorb-cont {
    position: absolute;
    z-index: 900;
    right: 80px;
    top: -70px;
    text-align: center;
    color: #000;
  }
  .warenkorb {
    width: 100%;
    height: 100%;
  }
  .warenkorb-cont p {
    padding-top: 14px;
    font-weight: 600;
    color: #000;
    font-size: 16px;
    text-align: center;
  }
  .warenkorb a,
  .warenkorb a:link {
    display: block;
    transform: scale(1) rotate(0deg);
    width: 50px;
    height: 50px;
    background: var(--gelb-dunkel) url(../images/icon-shop.svg) 0 0 no-repeat;
    background-size: cover;
    border-radius: 50%;
    overflow: hidden;
    text-decoration: none;
  }
  .warenkorb a:hover,
  .warenkorb a:focus-visible {
    transform: scale(1.1) rotate(-15deg);
    background: var(--gelb-hell) url(../images/icon-shop.svg) 0 0 no-repeat;
    background-size: cover;
  }
  .nav-cont .warenkorb-cont figure img {
    height: 50px;
  }

  /* ~~~~~~~~~~~~~~~~~ Button-Lupe ~~~~~~~~~~~~~~~~~~~~ */
  #lupe-cont {
    position: absolute;
    z-index: 900;
    left: -1000px;
    top: -1000px;
  }
  label[for="lupe-cont"] {
    position: absolute;
    z-index: 1000;
    right: 20px;
    top: -70px;
    width: 50px;
    height: 50px;
    background: var(--gelb-dunkel) url(../images/icon-lupe.svg) 0 0 no-repeat;
    background-size: cover;
    cursor: pointer;
    border-radius: 50%;
    transform: scale(1) rotate(0deg);
  }
  .light {
    opacity: 0;
  }
  #lupe-cont:checked ~ #search-field {
    display: block;
    width: 200px;
    transform: scale(1);
    right: 40px;
    top: 130px;
    opacity: 1;
  }
  #lupe-cont:checked + label,
  #lupe-cont:hover + label,
  #lupe-cont:focus-visible + label {
    transform: scale(1.1) rotate(-15deg);
    background: var(--gelb-hell) url(../images/icon-lupe.svg) 0 0 no-repeat;
    background-size: cover;
  }
   #lupe-cont:focus-visible + label {
    border: 2px solid #000;
    border-radius: 50%;
  }

  /* ~~~ Button-Suchefeld-Einblender~~~ */
  #search-field {
    position: absolute;
    width: 200px;
    right: 40px;
    top: 10px;
    z-index: 900;
    transform: scale(0);
    opacity: 0;
  }
  #suchstr,
  #volltextsuche {
    position: relative;
    width: 200px;
    height: 35px;
    color: #000;
    font-size: var(--step--1);
    padding: 0 5px;
    vertical-align: middle;
    border: 1px solid #000;
    border-radius: 5px;
  }
  #gobutton {
    position: absolute;
    top: -2px;
    right: -20px;
    width: 40px;
  }
   #suchstr,
   #gobutton {
    display: none;
  }
  #lupe-cont:checked ~  #search-field #suchstr,
  #lupe-cont:checked ~  #search-field #gobutton {
    display: block;
  }
  #volltextsuche {
    margin: 10px 0 0 7px;
    font-weight: 600;
    color: #000;
  }

  /* ~~~~~~~~~~~~~~~~~~~~~ Hamburger ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  /* checkbox */
  #mobile-nav-toggle {
    position: absolute;
    right: 0;
    top: 0;
    opacity: 0;
    display: none;
    z-index: 4000;
  }
  /* label für checkbox */
  .burger-btn {
    display: none;
    position: absolute;
    top: 7px;
    right: 15px;
    align-items: center;
    justify-content: flex-end;
    width: 50px;
    height: 44px;
    border-radius: 0.6rem;
    cursor: pointer;
    z-index: 3500;
  }
  .burger {
    position: relative;
    width: 50px;
    height: 2px;
    background: #000;
  }
  .burger::before,
  .burger::after {
    content: "";
    position: absolute;
    left: 0;
    width: 50px;
    height: 2px;
    background: #000;
    transition: transform var(--anim) var(--easing);
  }
  .burger::before {
    top: -8px;
  }
  .burger::after {
    top: 8px;
  }
  #mobile-nav-toggle:focus-visible + .burger-btn {
    background: var(--blau-dunkel-aktiv);
  }
  #mobile-nav-toggle:checked + .burger-btn .burger {
    background: transparent;
  }
  #mobile-nav-toggle:checked + .burger-btn .burger::before {
    transform: translateY(8px) rotate(45deg);
  }
  #mobile-nav-toggle:checked + .burger-btn .burger::after {
    transform: translateY(-8px) rotate(-45deg);
  }
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }

  /* ~~~~~~~~~~~~~~~~~~~~ Navigation ~~~~~~~~~~~~~~~~~~~ */
  nav {
    position: absolute;
    left: 0;
    width: 100%;
    margin: 0 auto;
  }
  .nav {
    z-index: 500;
    list-style: none;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1rem;
    justify-content: center;
    color: #000;
  }
  .hotline a,
  .shop-link a,
  .trigger,
  .shop-link.akt {
    position: relative;
    display: flex;
    gap: 0;
    flex-flow: column wrap;
    justify-content: center;
    padding: 0.25rem 0 3rem 0.75rem;
    cursor: pointer;
    border-radius: 15px;
    font-size: 1.2rem;
    font-weight: 400;
    background: var(--gruen-mittel);
    text-transform: uppercase;
    line-height: 1.6rem;
    width: 227px;
    height: 120px;
    transform: scale(1);
    z-index: 1200;
  }
  .hotline a,
  .hotline a:link,
  .shop-link a,
  .shop-link a:link,
  .shop-link.akt {
    position: relative;
    border-radius: 50%;
    background: var(--gelb-dunkel);
    padding: 0;
    align-items: center;
    width: 116px;
    height: 116px;
    text-decoration: none;
    padding-top: 38%;
    color: #000;
    font-weight: 700;
    transform: scale(1) rotate(0deg);
  }
  .shop-link-klein {
    font-size: 12px;
    line-height: 80%;
    font-weight: 600;
  }
  .shop-link.akt {
    padding-top: 1.75%;
  }
  .hotline,
  .shop-link {
    margin-left: -5px;
  }
  .hotline a:hover,
  .hotline a:focus-visible,
  .shop-link a:hover,
  .shop-link a:focus-visible,
  .shop-link.akt {
    transform: scale(1.1) rotate(-15deg);
    background: var(--gelb-hell);
  }
  .shop-link.akt {
    transform: scale(1) rotate(-15deg);
  }
  .hotline a::before,
  .hotline a:link::before,
  .shop-link a::before,
  .shop-link a:link::before,
  .shop-link.akt::before {
    content: "";
    position: absolute;
    top: 15px;
    left: 50%;
    margin-left: -25px;
    height: 50px;
    width: 50px;
    animation: tel-ring-2 6s 1.5s ease-out infinite;
    background: transparent url(../images/hotline.svg)0 0 no-repeat;
    background-size: cover;
  }
  .shop-link a::before,
  .shop-link a:link::before,
  .shop-link.akt::before {
    animation: none;
    background: transparent url(../images/icon-shop-link.svg)0 0 no-repeat;
    background-size: cover;
  }
  .hotline a:hover::before,
  .hotline a:focus-visible::before {
    animation: tel-ring 1.35s 0.2s ease-out infinite;
  }

  .trigger .kategorie {
    font-size: 1.7rem;
    font-weight: 700;
  }
  .trigger .kategorie::before {
    content: "";
  }
  .trigger.blau {
    background: var(--blau);
    color: #fff;
  }
  .trigger[data-has-sub="true"]::after {
    position: absolute;
    right: 10px;
    content: "";
    width: 1rem;
    height: 1rem;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(-45deg);
    transition: transform var(--anim) var(--easing);
  }
  .trigger.blau[data-has-sub="true"]::after,
  .trigger.blau:hover[data-has-sub="true"]::after {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
  }
  input[type="checkbox"]:checked + label.trigger[data-has-sub="true"]::after {
    transform: rotate(45deg);
    margin: 6px 0 0 7px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
  }
  input[type="checkbox"]:checked + label.trigger.blau[data-has-sub="true"]::after {
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
  }
  .trigger:hover,
  .trigger:focus-visible,
  .submenu2,
  .akt > .trigger,
  li.akt > .trigger {
    background: var(--gruen);
    color: #000;
    border: none;
  }
  .akt > .trigger,
  li.akt > .trigger {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  background: var(--gruen-hell);
  }
  .trigger:hover,
  .trigger:focus-visible {
    transform: scale(1.07);
  }
  .akt > .trigger:hover,
  li.akt > .trigger:hover,
  .akt > .trigger:focus-visible,
  li.akt > .trigger:focus-visible {
  transform: scale(1.0);
  }
  .trigger.blau:hover,
  .trigger.blau:focus-visible,
  .trigger.blau .submenu2,
  .akt > .trigger.blau,
  li.akt > .trigger.blau {
    background: var(--blau-dunkel);
    color: #fff;
  }
  .akt > .trigger.blau,
  li.akt > .trigger.blau {
    background: var(--blau-hell-hell);
    color: #000;
  }

  /* ~~~~~~~ Navi Ebene 2  ~~~~~~~ */
  .submenu2-wrap {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    width: 100%;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transform: translateY(-8px);
    transition: max-height var(--anim) var(--easing),
      opacity var(--anim) var(--easing), transform var(--anim) var(--easing);
    z-index: 999;
  }
  .submenu2 {
    list-style: none;
    margin: 0 auto;
    background: var(--gruen-hell);
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    padding: 6vh 28%;
    /* gap: 0.25rem; */
    justify-content:center;
    overflow: hidden;
    font-weight: 700;
    box-shadow: rgba(0, 0, 0, 0.5) 0px 5px 8px;
  }
  .submenu2 > li {
    list-style: none;
  }
  .submenu2.blau {
    background: var(--blau-hell-hell);
  }

  /* ~~~~~~~ WENN KEIN U-MENÜ z.B. ÜBERSICHT  ~~~~~~~ */
  .submenu2 li a,
  .submenu2 li a:link,
  .submenu2 li.akt {
    display: block;
    padding: 0.2rem 0.2rem 0.1rem 0.75rem;
    cursor: pointer;
    color: #000;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.2rem;
    border-left: 6px solid var(--gruen-mittel);
  }
  .submenu2 li.akt {
    cursor: default;
  }
  .submenu2 li.uebersicht a {
    text-transform: uppercase;
  }
  .submenu2.blau li a,
  .submenu2.blau li a:link,
  .submenu2.blau li.akt {
    background: transparent;
    border-left: 6px solid var(--blau-hell);
  }
  .submenu2 li.akt a,
  .submenu2 li.akt a:link,
  .submenu2 li a:hover,
  .submenu2 li a:focus-visible {
    background: var(--gruen-mittel);
    color: #000;
    letter-spacing: 0.05rem;
  }
  .submenu2 li.akt a,
  .submenu2 li.akt a:link,
  .submenu2 li.akt {
    background: transparent;
    font-weight: 800;
    letter-spacing: 0rem;
  }
  .submenu2.blau li a:hover,
  .submenu2.blau li a:focus-visible {
    background: var(--blau-hell);
  }
  .submenu2.blau li.akt a,
  .submenu2.blau li.akt a:link {
    background: transparent;
  }
  .submenu2 li.akt a:link
  .submenu2 li ul li a {
    border: none;
  }

  /* ~~~~~~~ Navi Karten U2  ~~~~~~~ */
  .u-card {
    padding: 0;
  }
  .u-head {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0.15rem 0.25rem 0.15rem 0.75rem;
    cursor: pointer;
    font-size: 1.2rem;
    font-weight: 600;
    border-left: 6px solid var(--gruen-mittel);
  }
  .u-head.blau {
    border-left: 6px solid var(--blau-hell);
  }
  .submenu2 li.akt .u-head,
  .u-head:hover,
  .u-head:focus-visible,
  .u-head.akt {
    color: #000;
    letter-spacing: 0.05rem;
  }
  .submenu2.blau li.akt .u-head.blau,
  .u-head.blau:hover,
  .u-head.blau:focus-visible,
  .u-head.blau.akt {
    background: transparent;
    letter-spacing: 0.05rem;
  }
  .submenu2 li.akt .u-head,
  .submenu2.blau li.akt .u-head.blau {
    letter-spacing: 0rem;
  }
  .u-head[data-has-sub="true"]::after {
    content: "";
    width: 0.75rem;
    height: 0.75rem;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(-45deg);
    transition: transform var(--anim) var(--easing);
    margin-left: 7px;
  }

  /* ~~~~~~~ Navi Ebene 3  ~~~~~~~ */
  .submenu3 {
    padding: 0 0 0 0.75rem;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateY(-6px);
    transition: max-height var(--anim) var(--easing),
    opacity var(--anim) var(--easing), transform var(--anim) var(--easing);
    border-left: 6px solid var(--gruen-mittel);
  }
  .submenu3 li a {
    display: block;
    width: 100%;
    padding: 0.35rem;
    text-decoration: none;
    font-weight: 400 !important;
  }
  .submenu3.blau,
  .submenu3.blau a {
    border-left: 6px solid var(--blau-hell);
  }
  .submenu2 li.akt .submenu3 a,
  .submenu3 li a {
    border: none !important;
    background: transparent !important;
    color: #000;
  }
  .submenu3 a:hover,
  .submenu3 a:focus-visible,
  .submenu2 li.akt .submenu3 a:hover,
  .submenu2 li.akt .submenu3 a:focus-visible,
  .submenu2 li.akt .submenu3 li.akt a,
  .submenu3 li.akt a {
    background: transparent;
    color: #000;
  }
  .submenu3.blau a:hover,
  .submenu3.blau a:focus-visible,
  .submenu2.blau li.akt .submenu3.blau a:hover,
  .submenu2.blau li.akt .submenu3.blau a:focus-visible,
  .submenu2.blau li.akt .submenu3.blau li.akt a,
  .submenu3.blau li.akt a {
    background:  transparent;
    color: #000;
  }

  /* ~~~~~~~ Navi Checkbox-Hack  ~~~~~~~ */
  input.nav-toggle,
  input.u-toggle {
    position: absolute;
    opacity: 0;
  }
  input.nav-toggle:checked ~ .submenu2-wrap {
    max-height: var(--submenu-max);
    opacity: 1;
    transform: translateY(0);
  }
  input.u-toggle:checked + label.u-head[data-has-sub="true"]::after {
    transform: rotate(45deg);
  }
  input.u-toggle:checked ~ ul.submenu3 {
    max-height: var(--submenu-max);
    opacity: 1;
    transform: translateY(0);
    padding-bottom: 0.5rem;
  }
  /* ~~~~~~~ Fokus  ~~~~~~~ */
  .trigger:focus-visible,
  .u-head:focus-visible,
  .submenu3 a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }
  /* ~~~~~~~ Style for hidden checkboxes ~~~~~~~ */
  .nav-toggle,
  .u-toggle {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
  /* Style for submenus, initially hidden */
  .submenu2-wrap,
  .submenu3 {
    display: none;
  }
  /* CSS zum Anzeigen des Untermenüs, wenn checkbox is checked */
  .nav-toggle:checked + .trigger + .submenu2-wrap,
  .u-toggle:checked + .u-head + .submenu3 {
    display: block;
  }
  .trigger::after,
  .u-head::after {
    content: "";
  }

  /* ~~~~~~~~~~~~~~ HEADER KLEIN ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  .header .headerbar.klein {
    top: 0;
    height: 70px;
    background: #fff;
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
  }
  .header .headerbar.klein label[for="lupe-cont"] {
    right: 5px;
    top: 8px;
  }
  .header .headerbar.klein .warenkorb-cont {
    right: 62px;
    top: 8px;
  }
  .header .headerbar.klein .nav,
  .header .headerbar.klein .nav li,
  .header .headerbar.klein .nav-cont,
  .header .headerbar.klein nav {
    top: 0;
    height: 60px;
    gap: 0.5rem;
  }
  .header .headerbar.klein > .nav li {
    height: 60px;
  }
  .header .headerbar.klein .submenu2 li,
  .header .headerbar.klein .submenu3 li {
    height: auto;
  }
  .header .headerbar.klein .nav {
    padding: 0 7.5rem;
  }
  .header .headerbar.klein .trigger {
    height: 55px;
    width: 160px;
    padding: 0.15rem 0 0 0.15rem;
    border-radius: 10px;
    margin-top: 7px;
  }
  .header .headerbar.klein .trigger .begriff,
  .header .headerbar.klein .trigger .kategorie {
    transform: scale(0.55);
    transform-origin: top left;
    margin-left: 5px;
  }
  .header .headerbar.klein .trigger .kategorie {
    margin-top: -7px;
  }
  .header .headerbar.klein .akt > .trigger, 
  .header .headerbar.klein li.akt > .trigger {
    box-shadow: none;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    border: none;
  }
  .header .headerbar.klein nav {
    gap: 0;
    height: 60px;
  }
  .header .headerbar.klein .brand {
    top: 6px;
    transform: scale(0.65);
  }
  .header .headerbar.klein li.hotline,
  .header .headerbar.klein li.shop-link,
  .header .headerbar.klein li.shop-link.akt {
    margin-left: 0;
    margin-top: 6px;
    height: 55px;
    width: 55px;
  }
  .header .headerbar.klein .shop-link-klein {
    font-size: 5px;
    line-height: 0;
    margin-top: -14px;
  }
  .header .headerbar.klein .shop-link a .shop-link-klein {
    font-size: 5px;
    line-height: 0;
    margin-top: -8px;
  }
  .header .headerbar.klein .hotline a,
  .header .headerbar.klein .hotline a:link,
  .header .headerbar.klein .shop-link a,
  .header .headerbar.klein .shop-link a:link,
  .header .headerbar.klein .shop-link.akt {
    margin-top: 0;
    padding-top: 43%;
    margin-left: 0;
    height: 55px;
    width: 55px;
    font-size: 9px;
  }
  .header .headerbar.klein .hotline a,
  .header .headerbar.klein .hotline a:link,
  .header .headerbar.klein .shop-link a,
  .header .headerbar.klein .shop-link a:link {
    padding-top: 35%;
    transform: scale(1) rotate(0deg);
  }
  .header .headerbar.klein .hotline a:hover,
  .header .headerbar.klein .hotline a:focus-visible,
  .header .headerbar.klein .shop-link a:hover,
  .header .headerbar.klein .shop-link a:focus-visible {
    padding-top: 30%;
    transform: scale(1) rotate(-15deg);
  }
  .header .headerbar.klein .shop-link.akt {
    padding-top: 1.1%;
  }
  .header .headerbar.klein .hotline a::before,
  .header .headerbar.klein .hotline a:link::before,
  .header .headerbar.klein .shop-link a::before,
  .header .headerbar.klein .shop-link a:link::before,
  .header .headerbar.klein .shop-link.akt::before {
    top: 7px;
    margin-left: -12px;
    height: 25px;
    width: 25px;
  }
  .header .headerbar.klein .submenu2 {
    margin-top: 1px;
    padding: 2vh 28%;
  }
  .header .headerbar.klein .submenu2 li {
    min-height: 33px;
  }
  .nav-toggle:checked + .trigger + .submenu2-wrap,
  .u-toggle:checked + .u-head + .submenu3 {
    display: block;
  }
  .header .headerbar.klein .submenu2 li a, 
  .header .headerbar.klein .submenu2 li a:link,
   .header .headerbar.klein .submenu2 li.akt,
  .header .headerbar.klein .u-head,
  .header .headerbar.klein .submenu3 li a {
    padding: 0.15rem 0.15rem 0.15rem 0.5rem;
  }
  .header .headerbar.klein .nav-toggle:checked + .trigger + .submenu2-wrap,
  .header .headerbar.klein .u-toggle:checked + .u-head + .submenu3 {
    display: block;
  }

  /* ~~~~~~~ Main ~~~~~~~ */
   main {
    width: 100%;
    position: relative;
    z-index: 12;
    padding: 0;
    min-height: 40rem;
    margin-top: 15px;
    border-top: 1px solid #fff;
  }
  .nav-breadcrumb + .cont-inhalt {
    margin: 2vh auto 4vh auto;
  }
  /* ~~~~~~~ breadcrumbs ~~~~~~~ */
  .nav-breadcrumb {
    width: 100%;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
  }
  .nav-breadcrumb .breadcrumb {
    margin: 0;
    padding: 0 0 0 5px;
    font-size: var(--step--1);
    border-top: 1px solid var(--gruen-mittel);
  }
  .nav-breadcrumb .breadcrumb ul {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
  }
  .nav-breadcrumb .breadcrumb li {
    position: relative;
  }
  .nav-breadcrumb .breadcrumb li,
  .nav-breadcrumb .breadcrumb li a,
  .nav-breadcrumb .breadcrumb li a:link {
    color: #474747;
    padding: 0.15rem 0.35rem 0.15rem 0.2rem;
    display: inline-flex;
  }
  .nav-breadcrumb .breadcrumb li:first-child {
    padding: 0.15rem 0.35rem 0.15rem 0;
  }
  .nav-breadcrumb .breadcrumb li.akt {
    padding: 0.35rem 0.3rem;
  }
  .nav-breadcrumb .breadcrumb li a,
  .nav-breadcrumb .breadcrumb li a:link {
    display: block;
    text-decoration: none;
    font-size: var(--step--1);
    font-weight: 400;
    transform: scale(1);
    transform-origin: center;
  }
  .nav-breadcrumb .breadcrumb li a:hover,
  .nav-breadcrumb .breadcrumb li a:focus-visible {
    color: var(--blau);
    text-decoration: none;
    transform: scale(1.075);
  }
  .nav-breadcrumb .breadcrumb li::after {
    content: "";
    position: absolute;
    top: 14px;
    right: 0;
    width: 8px;
    height: 8px;
    border-right: 1px solid var(--blau);
    border-bottom: 1px solid var(--blau);
    transform: rotate(-45deg);
  }
  .nav-breadcrumb .breadcrumb li.akt::after{
    display: none;
  }
  /* ~~~~~~~ Ende breadcrumbs ~~~~~~~ */
  
  .intro,
  .einleitung,
  .cont-inhalt,
  .slider-bannerbild,
  .card.team-alle,
  .cont-inhalt.schmal {
    position: relative;
    width: min(100%, 1200px);
    margin: 2vh auto;
  }
  .cont-inhalt {
    display: flex;
    flex-flow: column;
    justify-content: center;
  }
  .cont-inhalt h3 {
    margin: 1rem 0 0.5rem 0;
  }
  .einleitung {
    padding: 0.75dvh 0 0 0;
  }
  .einleitung p {
    margin-top: 1.5dvh;
    text-align: center;
    text-wrap: balance;
  }
  .intro,
  .intro.gruen {
    padding: 2rem;
    margin: 2dvh auto;
    background: var(--gruen-hell);
    overflow: hidden;
    border-radius: 15px;
  }
  .intro.blau {
    background: var(--blau-hell-hell);
  }
  .intro.gelb {
    background: var(--gelb-hell-hell);
  }
  .cont-inhalt h2 {
    max-width: 1200px;
    margin: 0 auto 2dvh auto;
    padding: 0;
    text-transform: none;
    font-weight: 600;
    text-align: left;
  }
  .cont-inhalt.cont-inhalt.schmal h2 {
    margin: 0;
    padding: 0;
    text-align: left;
  }
  .cont-inhalt .einleitung {
    padding: 0;
    margin: 0 auto 2rem auto;
  }
  .cont-inhalt .einleitung h2,
  .cont-inhalt .einleitung p {
    text-align: center;
  }
  .cont-inhalt .einleitung p {
    margin-top: 2dvh;
  }
  .cont-inhalt.volle-breite {
    width: 100%;
    max-width: 100%;
    background: #fff;
    padding: 8vh 0;
    margin: 10vh 0;
  }
  .cont-inhalt.volle-breite.ohne-farbe,
  .cont-inhalt.volle-breite.produkt,
  .cont-inhalt.volle-breite.rezept,
  .cont-inhalt.volle-breite.referenzen {
    background: transparent;
    margin: 2vh 0 3vh 0;
    padding: 2vh 0;
  }
  .cont-inhalt.volle-breite.gruen {
    width: 100%;
    background: var(--gruen-hell);
  }
  .cont-inhalt.volle-breite.blau::before,
  .cont-inhalt.volle-breite.gruen::before,
  .cont-inhalt.volle-breite.gruen.produkt::before {
    content: "";
    position: absolute;
    left: -3%;
    top: -3%;
    width: 600px;
    height: 600px;
    background: transparent url(../images/icon-ub-blume-weiss.svg) 0 0 no-repeat;
    background-size: contain;
  }
  .cont-inhalt.volle-breite.blau {
    background: var(--blau-hell-hell-ganz);
  }
  .cont-inhalt.volle-breite.blau::before {
    inset: auto 3% -3% auto;
  }
  .cont-inhalt.volle-breite.ohne-blume.blau::before,
  .cont-inhalt.volle-breite.ohne-blume.gruen::before,
  .cont-inhalt.volle-breite.ohne-blume::before,
  .cont-inhalt.volle-breite.ohne-blume.gruen.produkt::before {
    background: none;
  }
  .cont-inhalt.schmal {
    max-width: 800px;
    margin: 4vh auto;
  }
  .cont-inhalt ul,
  .details ul {
    margin: 0.75rem 0;
  }
  .cont-inhalt li,
   .details li {
    background: transparent url(../images/bullet.svg) 0 10px no-repeat;
    background-size: 10px;
    text-indent: 0;
    padding-left: 18px;
    margin-bottom: 0.75rem;
  }
  .cont-inhalt a {
   text-decoration: underline;
  }
  
  /* ~~~~~~~~~~~~~~ Bilder & Texte ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  .mega-bannerbild {
    position: relative;
    width: 100%;
    background: var(--gruen-hell);
    line-height: 0;
  }
  .mega-bannerbild img {
    position: relative;
    max-width: 2560px;
    display: table;
    margin: 0 auto;
  }
  .mega-bannerbild .mega-text,
  .mega-bannerbild .mega-text.rechts {
    max-width: 400px;
    position: absolute;
    bottom: 6vh;
    right: 10vw;
    width: auto;
    padding: 2rem;
    background: rgba(59,76,68,0.9);
    overflow: hidden; 
    border-radius: 15px;
    transform: scale(1);
  }
  .mega-bannerbild .mega-text.links {
    left: 6vw;
  }
  .mega-bannerbild .mega-text:hover,
  .mega-bannerbild .mega-text:hover.rechts,
  .mega-bannerbild .mega-text:hover.links {
     transform: scale(1.05);
     text-decoration: none;
      background: rgba(59,76,68,1);
  } 
  .mega-bannerbild .mega-text p {
    color: #fff;
    font-size: var(--step-2);
    line-height: 115%;
    font-weight: 400;
    text-align: left;
    text-wrap: unset;
    line-height: 110%;
    text-transform: uppercase;
    margin: 0;
    padding: 0;
  }
  .bild.volle-breite {
    position: relative;
    width: min(1200px, 100%);
    line-height: 0;
    margin: 2rem auto 0.5rem auto;
  }
  .wrapper-bild {
    position: relative;
    display: block;
    width: 100%;
    border-radius: 15px;
    overflow: hidden;
  }
  /* ~~~ Bildtext ~~~*/
  p.bildtext {
    position: relative;
    margin: 10px 0 20px 15px;
    font-size: var(--step--1);
    line-height: 1.3rem;
    font-style: italic;
  }

  /* ~~~~~~~~~~~~~~ button-links ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  .wrapper-button-link {
    width: 100%;
    max-width: 1200px;
    text-align: center;
    margin: 1rem auto;
  }

  .button-link.komplett-verlinkt {
    position: relative;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--blau-dunkel);
    text-decoration: none;
    text-align: center;
    padding: 1rem 0.75rem;
    margin: 2rem auto 0 auto;
    border-radius: 10px;
    transform: scale(1);
    border: 2px solid var(--blau-dunkel);
  }
  .cont-inhalt.volle-breite.gruen .button-link.komplett-verlinkt {
    color: var(--gruen-dunkel-dunkel);
    border: 2px solid var(--gruen-dunkel-dunkel);
  }
  .button-link.komplett-verlinkt::after {
    content: " ";
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--blau-dunkel);
    border-bottom: 2px solid var(--blau-dunkel);
    transform: rotate(-45deg);
    transition: transform var(--anim) var(--easing);
  }
  .button-link.komplett-verlinkt.darkblue {
    color: var(--weiss);
    background: var(--blau-dunkel);
  }
  .button-link:hover.komplett-verlinkt,
  .button-link:focus-visible.komplett-verlinkt {
    color: var(--weiss);
    background: var(--blau-dunkel);
    align-self: center;
    transform: scale(1.075);
  }
  .cont-inhalt.volle-breite.gruen .button-link:hover.komplett-verlinkt,
  .cont-inhalt.volle-breite.gruen .button-link:focus-visible.komplett-verlinkt {
    color: var(--weiss);
    background: var(--gruen-dunkel-dunkel);
  }
  .button-link:hover.komplett-verlinkt::after,
  .button-link:focus-visible.komplett-verlinkt::after {
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
  }
  
  /* ~~~~~~~~~~~~~~~~~~~~ cards ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
 
  .card,
  .card.team-solo {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin-bottom: 0;
  }

  /* ~~~~~~ cards allgemein ~~~~~~ */
  .card figure,
  .card.bannerbild figure {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: 15px;
    overflow: hidden;
    line-height: 0;
    transform: scale(1.0, 1.0)
  }
  .card.bannerbild figure {
    border-radius: 0;
  }
  .card.bannerbild {
    border-radius: 15px;
  }
  .card .card-text {
    position: relative;
    padding: 0.75rem 0 0 0.75rem;
    display: flex;
    flex-flow: column;
    flex: 1;
  }
  .card .titel {
    margin: 0 0 0.5rem 0;
    padding: 0 0 0 0;
  }
  .card .card-text h2,
  .card .card-text h3 {
    position: relative;
    font-size: 1.5rem;
    text-align: left;
    font-weight: 700;
  }
   /* ~~~~~~ card Team-solo ~~~~~~ */
  .card.team-solo figure {
    overflow: hidden;
  }
  .card.team-solo figure img {
    object-fit: cover;
    aspect-ratio: 1/1;
  }
  .card.team-solo .card-text h3 {
    font-size: 20px;
    margin: 0;
  }
  .card.team-solo .card-text p {
    font-size: 18px;
  }
  /* ~~~ Card Team ALLE~~~~~~~~~~~~~~~~~~~~~*/
  .card.team-alle {
    position: relative;
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    background: var(--gelb-hell);
    margin: 6vh auto 8vh auto;
  }
  .card.team-alle::before {
    content: '';
    position: absolute;
    right: 10px;
    bottom: 10px;
    width: 110px;
    height: 110px;
    background: transparent url(../images/icon-ub-blume.svg) 0 0 no-repeat;
    background-size: contain;
  }
  .card.team-alle figure {
    width: 50%;
  }
  .card.team-alle .card-text {
    position: relative;
    width: 50%;
    height: 100%;
    font-size: 1.35rem;
    padding: 0 4rem;
    margin: 0;
    text-align: center;
    font-weight: 600;
    text-align: left;
  }
  .card.team-alle .wrapper-button-link {
    text-align: left;
    margin: 1rem  0 0 0;
  }
   /* ~~~~~~ card Bannerbild ~~~~~~ */
  .card.bannerbild {
    width: 100%;
    background: var(--gruen-mittel);
  }
  .card.bannerbild .card-text h3,
  .card.bannerbild .card-text h2 {
    width: 100%;
    text-align: right;
    font-size: 2.2rem;
    text-transform: none;
    font-weight: 700;
    line-height: 1.2;
    padding: 1rem 3rem 2.5rem 1rem;
    margin: 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
  .card.bannerbild .card-text h4 {
    position: absolute;
    bottom: 5rem;
    left: 13%;
    z-index: 2;
    text-align: center;
    width: 200px;
    height: 200px;
    font-weight: 700;
    hyphens: none;
    transform: rotate(-15deg);
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    background: var(--gelb-mittel);
    box-shadow: var(--box-shadow-2);
    border-radius: 50%;
    padding: 0 1rem;
    font-size: 1.5rem;
    line-height: 1.8rem;
    text-wrap: wrap;
    animation: slide-circle-normal 1s 1;
    transition: all 0.5s ease-in-out;
  }

  /* ~~~ Wrapper für Cards  ~~~~~~~~~~~~*/
  .wrapper-cards {
    width: min(100%, 1200px);
    margin: 2vh auto;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    gap: 3.5%;
  }
  .wrapper-cards.team {
    gap: 2.67%;
  }
  .wrapper-cards .card.komplett-verlinkt,
  .wrapper-cards.produkt .card,
  .wrapper-cards.referenzen .rahmen.drop-down,
  .wrapper-cards .card {
    width: 31%;
  }
  .wrapper-cards .card.team-solo.komplett-verlinkt {
    width: 22.9%;
  } 
  /* ~~~ Card Links ~~~~~~~~~~~~~~~~~~~~~*/
  .card.produkt,
  .card.rezept,
  .card.ergebnis {
    margin: 0 0 3vh 0;
  }
  .card.rezept .card-media {
    aspect-ratio: 1/1;
  }
  .card.rezept figure img {
    height: 100%;
    object-fit: cover;
    transform: scale(1);
  }
  .card .card-text h3,
  .card.alsListe .card-text h3 {
    margin: 0 0 7px 0;
  }
  .card .card-text h3 a,
  .card .card-text h3 a:link,
  .card.alsListe .card-text h3 a,
  .card.alsListe .card-text h3 a:link {
    display: block;
    text-decoration: none;
    font-weight: 700;
    color: #000;
  }
  .card .card-text h3 a:hover,
  .card .card-text h3 a:focus-visible,
  .card.alsListe .card-text h3 a:hover,
  .card.alsListe .card-text h3 a:focus-visible {
    letter-spacing: 0.02em;
    color: var(--blau-dunkel-mittel);
  }
  .card.komplett-verlinkt .weiter {
    color: var(--blau-dunkel-mittel);
  }
  .card .versandkosten,
  .card .warenkorb-legen,
  .card .download,
  .card .kochen,
  .card .weiter,
  .card.komplett-verlinkt .weiter
  .card.alsListe .versandkosten,
  .card.alsListe .warenkorb-legen,
  .card.alsListe .download,
  .card.alsListe .kochen,
  .card.alsListe .weiter {
    font-weight: 600;
    font-size: 18px;
  }
  .card.produkt .versandkosten,
  .card.alsListe .versandkosten {
    font-weight: 400;
    font-style: italic;
    font-size: 18px;
  }
  .card .warenkorb-legen a,
  .card .warenkorb-legen a:link,
  .card .download a,
  .card .download a:link,
  .card .kochen a,
  .card .kochen a:link,
  .card .weiter a,
  .card .weiter a:link,
  .card.alsListe .warenkorb-legen a,
  .card.alsListe .warenkorb-legen a:link,
  .card.alsListe .download a,
  .card.alsListe .download a:link,
  .card.alsListe .kochen a,
  .card.alsListe .kochen a:link,
  .card.alsListe .weiter a,
  .card.alsListe .weiter a:link,
  .card.komplett-verlinkt .weiter {
    font-weight: 600;
    text-decoration: none;
    position: relative;
    margin-left: 40px;
    transition: all 0.35s ease-in-out;
  }
  .card .warenkorb-legen a:hover,
  .card .warenkorb-legen a:focus-visible,
  .card .download a:hover,
  .card .download a:focus-visible,
  .card .kochen a:hover,
  .card .kochen a:focus-visible,
  .card .weiter a:hover,
  .card .weiter a:focus-visible,
  .card.alsListe .warenkorb-legen a:hover,
  .card.alsListe .warenkorb-legen a:focus-visible,
  .card.alsListe .download a:hover,
  .card.alsListe .download a:focus-visible,
  .card.alsListe .kochen a:hover,
  .card.alsListe .kochen a:focus-visible,
  .card.alsListe .weiter a:hover,
  .card.alsListe .weiter a:focus-visible,
  .card.komplett-verlinkt:hover .weiter,
  .card.komplett-verlinkt:focus-visible .weiter {
    text-decoration: none;
    position: relative;
    margin-left: 45px;
    letter-spacing: 0.02em;
    transition: all 0.35s ease-in-out;
  }
  .card .warenkorb-legen a::before,
  .card .warenkorb-legen a:link::before,
  .card .download a::before,
  .card .download a:link::before,
  .card .kochen a::before,
  .card .kochen a:link::before,
  .card .weiter a::before,
  .card .weiter a:link::before,
  .card.alsListe .warenkorb-legen a::before,
  .card.alsListe .warenkorb-legen a:link::before,
  .card.alsListe .download a::before,
  .card.alsListe .download a:link::before,
  .card.alsListe .kochen a::before,
  .card.alsListe .kochen a:link::before,
  .card.alsListe .weiter a::before,
  .card.alsListe .weiter a:link::before,
  .card.komplett-verlinkt .weiter::before {
    content: '';
    position: absolute;
    left: -40px;
    top: -2px;
    width: 35px;
    height: 35px;
    background: var(--gelb-hell) url(../images/icon-shop.svg) 0 0 no-repeat;
    background-size: cover;
    border-radius: 50%;
    overflow: hidden;
    transition: all 0.35s ease-in-out;
    transform: scale(1);
  }
  .card .download a::before,
  .card .download a:link::before,
  .card.alsListe .download a::before,
  .card.alsListe .download a:link::before {
    background: var(--gelb-hell) url(../images/icon-download.svg) 0 0 no-repeat;
    background-size: cover;
  }
  .card .kochen a::before,
  .card .kochen a:link::before,
  .card.alsListe .kochen a::before,
  .card.alsListe .kochen a:link::before {
    background: var(--gelb-hell) url(../images/icon-kochen.svg) 0 0 no-repeat;
    background-size: cover;
  }
  .card .weiter a::before,
  .card .weiter a:link::before,
  .card.alsListe .weiter a::before,
  .card.alsListe .weiter a:link::before,
  .card.komplett-verlinkt .weiter::before {
    background: var(--gelb-hell) url(../images/icon-weiter.svg) 0 0 no-repeat;
    background-size: cover;
  }
  .card .warenkorb-legen a:hover::before,
  .card .warenkorb-legen a:focus-visible::before,
  .card .download a:hover::before,
  .card .download a:focus-visible::before,
  .card .kochen a:hover::before,
  .card .kochen a:focus-visible::before,
  .card .weiter a:hover::before,
  .card .weiter a:focus-visible::before,
  .card.alsListe .warenkorb-legen a:hover::before,
  .card.alsListe .warenkorb-legen a:focus-visible::before,
  .card.alsListe .download a:hover::before,
  .card.alsListe .download a:focus-visible::before,
  .card.alsListe .kochen a:hover::before,
  .card.alsListe .kochen a:focus-visible::before,
  .card.alsListe .weiter a:hover::before,
  .card.alsListe .weiter a:focus-visible::before,
  .card.komplett-verlinkt:hover .weiter::before,
  .card.komplett-verlinkt:focus-visible .weiter::before {
    transition: all 0.35s ease-in-out;
    transform: scale(1.15);
  }

  /* ~~~ Card Thema + Team SOLO~~~~~~~~~~~~~~~~~~~~~*/
  .card.thema,
  .card.team-solo-detail {
    position: relative;
    width: 100%;
    flex-flow: row wrap;
    align-items: center;
    gap: 5%;
    margin: 6vh 0 8vh 0;
    border-radius: 0;
  }
  .card.team-solo-detail {
    align-items: flex-start;
    margin: 2vh 0;
  }
  .card.thema figure,
  .card.thema.bild-links figure,
  .card.team-solo-detail figure {
    width: 40%;
    aspect-ratio: 1/1;
    border-radius: 15px;
    order: 1;
  }
  .card.thema figure img,
  .card.team-solo-detail figure img {
    height: 100%;
    object-fit: cover;
    transform: scale(1);
  }
  .card.thema figure:hover img {
    transform: scale(1);
  }
  .card.thema .card-text,
  .card.thema.bild-links .card-text,
  .card.team-solo-detail .card-text {
    height: 100%;
    padding: 0;
    margin: 0;
    order: 2;
  }
  .card.thema.bild-rechts figure {
    order: 2;
  }
  .card.thema.bild-rechts .card-text {
    order: 1;
  }
  .card .card-text h2,
  .card.thema .card-text h3 {
    margin: 0 0 0.75rem 0;
  }
  .card.thema .wrapper-button-link {
    text-align: left;
  }
  .cont-inhalt .wrapper-button-link .button-link.komplett-verlinkt,
  .cont-inhalt.volle-breite .wrapper-button-link .button-link.komplett-verlinkt {
    margin: 0;
    display: inline-block;
    transform-origin: center center;
  }
  .wrapper-button-link .button-link.komplett-verlinkt,
  .card.team-alle .button-link.komplett-verlinkt,
  .card.thema .button-link.komplett-verlinkt {
    transform-origin: center left;
  }

  /* ~~~~~~~~~~~~~~~~~ Card Kontakt Fragen ~~~~~~~~~~~~~~~~~~~~~~*/
  .card.contact,
  .card.contact.gelb {
    width: min(100%, 800px);
    padding: 1.0rem 0.5rem 2.0rem 2.0rem;
    margin: 2.5rem auto 3.5rem auto;
    background: var(--gelb-hell-hell);
    font-weight: 400;
    border-radius: 15px;
  }
  .card.contact.gruen {
    background: var(--gruen-hell);
  }
  .card.contact.blau {
    background: var(--blau-hell-hell);
  }
  .card.contact h2,
  .card.contact h3 {
    font-size: var(--step-1);
    text-align: left;
    margin: 0 0 15px 0;
    font-weight: 700;
  }
  .card.contact h3 {
    margin: 0;
  }
  .card.contact .bild-text {
    display: flex;
    gap: 1.5rem;
    align-items: center;
  }
  .card.contact .bild-text p.funktion {
    font-size: var(--step--1);
    line-height: 1.5rem;
    font-weight: 600;
    text-transform: uppercase;
  }
  .card.contact .bild-text figure {
    overflow: hidden;
    border-radius: 15px;
    width: 250px;
    height: 250px;
  }
  .card.contact .bild-text figure img {
    object-fit: cover;
    aspect-ratio: 1/1;
    height: 100%;
  }
   .card.contact .button-link.komplett-verlinkt::after {
    display: none;
   }

  /* ~~~~~~~~~~~~~~~~~ Card KOMPLETT verlinkt ~~~~~~~~~~~~~~~~~~~~~~*/
  /* Card Wrapper */
  .card.komplett-verlinkt {
    position: relative;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    z-index: 1;
  }
  /* Bild */
  .card-media {
    margin: 0;
    overflow: hidden;
    border-radius: 15px;
  }
  .card-media img {
    display: block;
    width: 100%;
    height: auto;
    transform: scale(1);
    transition: all 0.5s ease-in-out;
  }
  /* Content */
  .card-text {
    padding: 1rem;
    transform: scale(1);
    transition: all 0.5s ease-in-out;
  }
  .card.komplett-verlinkt .card-title {
    margin: 0 0 .5rem;
    text-decoration: none;
  }
  .card.komplett-verlinkt .bannerbild .card-title h3 {
    width: 100%;
    text-align: right;
    color: var(--gruen-dunkel-dunkel);
    font-size: 2.5rem;
    text-transform: none;
    font-weight: 700;
    line-height: 1.2;
    padding: 2rem 3rem 2.5rem 1rem;
    margin: 0;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    transform-origin: center right;
  }
  /* Bild-Zoom */
  .card.komplett-verlinkt:hover .card-text,
  .card.komplett-verlinkt:focus-visible .card-text,
  .card.komplett-verlinkt:hover .card-media img,
  .card.komplett-verlinkt:focus-visible .card-media img {
    transform: scale(1.05);
  }
  .card.alsListe.komplett-verlinkt:hover .card-text,
  .card.alsListe.komplett-verlinkt:focus-visible .card-text {
    transform-origin: center center;
    transition: all 0.5s ease-in-out;
  }
  .card.komplett-verlinkt .card-text p {
    font-weight: 400;
  }
  .card.komplett-verlinkt .weiter {
    margin-bottom: 0.25rem;
    font-weight: 600 !important;
    font-size: var(--step--1);
  }
  .card.komplett-verlinkt:hover .card-title,
  .card.komplett-verlinkt:focus-visible .card-title,
  .card.komplett-verlinkt:hover .card-text h4,
  .card.komplett-verlinkt:focus-visible .card-text h4,
  .card.komplett-verlinkt:hover .card-text h3,
  .card.komplett-verlinkt:focus-visible .card-text h3,
  .card.bannerbild.komplett-verlinkt:hover,
  .card.bannerbild.komplett-verlinkt:focus-visible {
    color: #000;
    transition: all 0.5s ease-in-out;
  }
  .card.bannerbild.komplett-verlinkt:hover,
  .card.bannerbild.komplett-verlinkt:focus-visible {
    color: #000;
    background: var(--gruen);
  }
  .card.komplett-verlinkt:hover .card-text h4,
  .card.komplett-verlinkt:focus-visible .card-text h4 {
    transform: scale(1.05) rotate(0deg);
    transition: all 0.5s ease-in-out; 
    left: 15%;
  }
  .card.komplett-verlinkt:focus-visible .card-text h4 {
    outline: 3px solid var(--gelb-mittel);  
    outline-offset: 5px; 
  }

  /* ~~~~~~~~~~~~~~~~~ ENDE Cards KOMPLETT verlinkt ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

  /* ~~~~~~ cards logo ~~~~~~ */
  .wrapper-logos-icons,
  .sponsor-logo-cont,
  .zertifikat-logo-cont {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 1rem;
    margin: 2vh auto;
  }
  .sponsor-logo-cont,
  .zertifikat-logo-cont {
    gap: 3rem;
    margin: 2vh auto 1.5vh auto;
  }
  .sponsor-logo-cont{
    padding-bottom: 1rem;
    border-bottom: 1px solid #c5c5c5;
  }
  .zertifikat-logo-cont{
    padding-top: 1rem;
    border-top: 1px solid #c5c5c5;
  }
  .card.logo,
  .card.icon {
    justify-content: flex-start;
    max-width: 250px;
    margin-bottom: 0.25rem;
    border-radius: 10px;
    background: #fff;
    padding: 0;
  }
  .card.icon,
  .card.sponsor-logo,
  .card.zertifikat-logo {
    width: 180px;
    border-radius: 0;
    border: none;
    background: transparent;
  }
  .card.sponsor-logo,
  .card.zertifikat-logo {
    width: 125px;
    transform: scale(1);
    transition: all 0.5s ease-in-out;
  }
  .card.sponsor-logo:hover,
  .card.sponsor-logo:focus-visible,
  .card.zertifikat-logo:hover,
  .card.zertifikat-logo:focus-visible {
    transform: scale(1.1);
    transition: all 0.5s ease-in-out;
  }
  .card.logo figure,
  .card.icon figure {
    overflow: hidden;
    aspect-ratio: 1/0.6;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .card.icon figure img {
    width: 100%;
  }
  .card.icon figure {
    aspect-ratio: 1/1;
    border-radius:50%;
    border: 4px solid #fff;
    background: var(--gelb-hell);
    transition: all 0.5s ease-in-out;
    transform: rotate(0deg);
  }
  .card.sponsor-logo figure,
  .card.zertifikat-logo figure {
    border-radius: 0;
  }
  .card.icon.komplett-verlinkt:hover figure,
  .card.icon.komplett-verlinkt:focus-visible figure {
    background: var(--gruen-mittel);
    transition: all 0.5s ease-in-out;
    transform: rotate(-15deg);
  }
  .card.logo .card-text, 
  .card.icon .card-text {
    justify-content: flex-start;
    padding: 0;
  }
  .card.logo .card-text h3,
  .card.icon .card-text h3 {
    padding: 0;
    margin: 10px 0;
    text-align: center;
    font-size: 1.3rem;
    font-weight: 600;
  }

  /* ~~~~~~ Nachricht f. Ware in shop gelegt ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
  .message-warenkorb {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    align-items: center;
    padding: 1rem;
    margin-bottom: 2rem;
    background: var(--gelb-hell);
    font-size: 1.15rem;
    border-radius: 10px;
  }
  .message-warenkorb .produkt-info {
    position: relative;
    color: #000;
    align-self: flex-start;
    padding-left: 25px;
  }
  .message-warenkorb .produkt-info::before {
    content: "";
    position: absolute;
    top: 4px;
    left: 0;
    height: 20px;
    width: 20px;
    background: transparent url(../images/pfeil-message.svg) 0 0 no-repeat;
    background-size: cover;
  }
  .message-warenkorb .warenkorb-link {
    align-self: flex-end;
  }
  .message-warenkorb .warenkorb-link a,
  .message-warenkorb .warenkorb-link a:link {
    display: block;
    text-decoration: none;
    transform: scale(1);
    transform-origin: right;
  }
  .message-warenkorb .warenkorb-link a:hover,
  .message-warenkorb .warenkorb-link a:focus-visible {
    transform: scale(1.1);
  }

  

  /* ~~~~~~~~~~ Warenkorb = shopping cart ~~~~~~~~~~~~~~~~~~~~~~~~~*/
  .table-wrap {
      width: min(100%, 1200px);
      margin: 1dvh auto 2dvh auto;
      padding: 1.25rem;
      background: var(--gelb-hell-heller);
      border-radius: 15px;
  }
  .form-box.kontakt,
  .shopping-cart-feld {
    width: min(100%, 800px);
    margin: 1dvh auto 2dvh auto;
    padding: 10px;
    background: var(--gelb-hell-heller);
    border-radius: 15px;
  }
  .form-box.kontakt {
    padding: 2rem 2rem 1em 2rem;
  }
  .shopping-cart-feld.userdaten {
    padding: 1rem 1rem 2.5rem 1rem;
  }
  .shopping-cart-feld.userdaten .shopping-cart tbody td {
    padding: 0.25rem 0;
  }
 .shopping-cart {
      width: 100%;
      border-collapse: collapse;
      letter-spacing: 0;
  }
  .shopping-cart,
  .summary,
  .payment-box,
  .consent-box,
  .checkout-form,
  .form-row {
      font-size: var(--step-0);
  }
  .shopping-cart th,
  .shopping-cart td,
  .form-table th,
  .form-table td {
      padding: 0.5rem;
      border-bottom: 1px solid var(--line);
      vertical-align: middle;
  }
  /* ~~~~~~~~~ Warenkorb-Tabelle ~~~~~~~~~ */
  .shopping-cart th,
  .shopping-cart td {
      text-align: right;
  }
  .shopping-cart th {
      font-weight: 600;
      background: var(--blau-hell-heller); 
  }
  .shopping-cart tbody tr:nth-child(odd) {
    background-color: var(--gelb-hell-am-hellsten);
  }
  .shopping-cart.cart-summary th {
      background: none; 
  }
  .shopping-cart th:first-child,
  .shopping-cart td:first-child,
  .summary th:first-child,
  .summary td:first-child {
      text-align: left;
  }
  .shopping-cart tfoot td.total-price-wort, 
  .shopping-cart tfoot td.total-price {
    padding: 0.5dvh 5px;
    text-align: right;
    max-width: 110px;
  }
  .shopping-cart tfoot td.total-price-wort {
    font-weight: 300;
    font-size: var(--step--1);
  }
  .shopping-cart th.total-price, 
  .shopping-cart td.price, 
  .shopping-cart th.price,
  .shopping-cart th.total-price, 
  .shopping-cart td.total-price {
    text-align: right;
    padding-right: 0.5rem;
  }
  .shopping-cart td.remove-button {
    position: relative;
    height: 40px; 
    width: 40px; 
    padding: 0 10px; 
  }
  .shopping-cart td.remove-button a {
    position: absolute;
    height: 40px; 
    width: 100px;
    top: 5px; 
    left: 0px;
    border-radius: 7px;
    opacity: 0.75;
  }
  .shopping-cart td.remove-button a:hover,
  .shopping-cart td.remove-button a:focus-visible {
    background: var(--gelb-dunkel);
  }
  #shopping-cart-button {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 1rem 0;
  }
  .produktname {
    max-width: 260px;
  }/* Mengenfeld */
  .qty {
      display: inline-flex;
      align-items: center;
      border-radius: 4px;
      overflow: hidden;
  }
  .qty input {
      width: 50px;
      border: none;
      text-align: center;
      font-size: 1rem;
      background: var(--gelb-hell-hellsten);
  }
  .qty:nth-child(odd) input {
      background: var(--gelb-hell-am-heller);
  }
  .qty-btn {
      width: 40px;
      height: 40px;
      font-size: 1.5rem;
      font-weight: 600;
      border-radius: 6px;
      background: var(--gelb-hell-heller);
      cursor: pointer;
      text-align: center;
      border: 1px dotted var(--blau-dunkel-mittel);
  }
  .qty-btn:hover,
  .qty-btn:focus-visible {
      background: var(--gelb-dunkel);
  }
  .remove {
      border: none;
      background: transparent;
      font-size: 20px;
      cursor: pointer;
      text-align: right;
      padding: 5px 10px;
      border-radius: 7px;
  }
  .remove:hover,
  .remove:focus-visible {
      font-weight: 700;
      background: var(--gelb-dunkel);
  }
  .shopping-cart caption,
  .cart-summary caption,
  .order-summary h2 {
      text-align: left;
      margin-bottom: 1rem;
  }

  /* ~~~~~~~~~ Meldungen im Shop  ~~~~~~~~~ */
  .notices-wrapper {
      width: min(100%, 1200px);
      margin: 0 auto;
  }
  .message {
      width: 100%;
      display: flex;
      justify-content: flex-start;
      background: var(--gelb-hell);
      font-size: var(--step-0);
      margin-bottom: 0.75rem;
      border-radius: 15px;
  }
  .message + .message {
      margin-top: 0;
  }
  .alert-arrow,
  .alert-icon,
  .alert-close {
      position: relative;
      border-right: 1px solid var(--line);
      text-align: center;
      padding: 0.75rem 1.75rem;
      flex-grow: 0;
      flex-shrink: 0;
      display: flex;
      justify-content: center;
      align-items: center;
  }
  .alert-arrow {
      padding: 0.95rem 1.95rem;
  }
  .alert-close {
      border-right: 0;
      border-left: 1px solid var(--line);
  }
  .alert-close:hover,
  .alert-close:focus-visible {
      background: var(--uma-blau-mittel);
      text-decoration: none;
  }
  .alert-icon::before,
  .alert-close::before {
      content: '!';
      font-size: 1.5rem;
  }
  .alert-close::before {
      content: '✕';
  }
  .alert-arrow::before {
      content: "";
      position: absolute;
        top: 50%;
      left: 50%;
      margin: -14px 0 0 -11px;
      width: 8px;
      height: 14px;
      border: 2px solid var(--blau-dunkel-mittel);
      border-top: 0;
      border-left: 0;
      transform: translate(9px, 7px) rotate(45deg);
      z-index: 1;
  }
  .message .warenkorb-link {
      text-align: right;
      padding-right: 1.25rem;
      font-weight: 700;
      line-height: 1rem;
      align-self: center;
  }
  .alert-wrapper {
      position: relative;
      width: auto;
      flex-grow: 1;
      padding: 1rem 1rem .8rem;
      height: auto;
      margin-top: auto;
      margin-bottom: auto;
  }
  .message-toggle-input {
      position: absolute;
      opacity: 0;
      pointer-events: none;
  }
  .message-toggle-label {
      /* text-decoration: underline; */
      cursor: pointer;
      font-weight: 700;
      color: var(--uma-blau-dunkel)
  }
  .message-toggle-label:hover,
  .message-toggle-label:focus-visible {
      color: var(--schwarz);
      text-decoration: underline;
  }
  .message-panel {
      display: grid;
      grid-template-rows: 0fr;
      min-height: 0;
      opacity: 0;
      overflow: hidden;
      margin: 0;
      transition:
          grid-template-rows 0.55s cubic-bezier(.25,.9,.25,1),
          opacity 0.35s ease,
          margin 0.35s ease;
      font-size: var(--step--1);
  }
  .message-panel-inner {
      min-height: 0;
      overflow: hidden;
      padding: 0;
      border: 0;
      background: transparent;
  }
  .message-panel.is-open {
      grid-template-rows: 1fr;
      opacity: 1;
      margin: 0 0 1rem 0;
  }
  .message-panel.is-open .message-panel-inner {
      padding: 1.5rem;
      border: 1px solid var(--uma-blau-hell);
      background: var(--weiss);
  }
  .message-panel.form-row,
  .message-panel .form-row > label:first-child {
      text-align: left;
  }
  .login-box,
  .coupon-box {
      width: 650px;
      margin: 0 auto;
  }
  .message-panel-text {
      text-align: center;
      margin: 0 0 1.5rem 0;
  }
  .form-row.form-row-stacked {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.35rem;
      margin-bottom: 1.25rem;
  }
  .form-row.form-row-stacked label {
      text-align: left;
      font-weight: 600;
  }
  .form-row.form-row-stacked input {
      width: 100%;
      min-height: 48px;
      padding: 0.45rem 0;
      border: none;
      border-bottom: 1px solid var(--schwarz);
      background: transparent;
      font: inherit;
  }
  .form-row.form-row-stacked input:focus {
      outline: none;
      border-bottom: 2px solid var(--uma-blau-dunkel);
  }
  .form-row-password {
      position: relative;
  }
  .password-toggle {
      position: absolute;
      right: 0;
      bottom: 0.55rem;
      border: 0;
      background: transparent;
      cursor: pointer;
      font-size: 1rem;
  }
  .login-remember {
      margin: 0.5rem 0 1.25rem 0;
  }
  .login-actions,
  .coupon-actions {
      display: grid;
      gap: 0.75rem;
  }
  .login-actions .checkout-btn,
  .coupon-actions .checkout-btn {
      width: 100%;
  }
  .login-forgot {
      text-align: center;
  }
  .required {
      color: #b04a5a;
  }

  /* ~~~ card als Listen-Beiträge ~~~~~~~~~~~~~~~*/
  .card.alsListe,
  .event-info {
    display: flex;
    flex-flow: row wrap;
    align-items: flex-start;
    width: min(1200px, 100%);
    text-align: left;
    margin: 0 auto;
    background: transparent;
    border-radius: 0;
    gap: 1.5rem;
    padding: 3rem 0;
    border-bottom: 1px solid var(--blau-mittel);
    overflow: hidden;
    box-shadow: none;
  }
  .wrapper-events.gruen,
  .wrapper-events.blau {
    position: relative;
    width: 100%;
    border-radius: 15px;
    overflow: visible;
    border: 4px solid var(--gruen-mittel);
    padding: 0 20px 20px 20px;
    margin-top: 2dvh;
  }
  .wrapper-events.blau {
    border: 4px solid var(--blau-mittel);
  }
  .wrapper-events.gruen::before,
  .wrapper-events.gruen::after,
  .wrapper-events.blau::before,
  .wrapper-events.blau::after {
    position: absolute;
    content: '';
    left: 15%;
    top: -30px;
    width: 20px;
    height: 65px;
    border: 4px solid var(--gruen-mittel);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
  }
  .wrapper-events.gruen::after {
    left: auto;
    right: 15%;
  }
  .wrapper-events.blau::before,
  .wrapper-events.blau::after {
    border: 4px solid var(--blau-mittel);
  }
  .wrapper-events.blau::after {
    left: auto;
    right: 15%;
  }
  .wrapper-events.gruen .headline,
  .wrapper-events.blau .headline {
    padding: 1.5rem 0;
    border-bottom: 2px solid var(--gruen-mittel);
  }
  .wrapper-events.blau .headline {
    border-bottom: 2px solid var(--blau-mittel);
  }
  .wrapper-events .headline h2,
  .wrapper-events .headline h3 {
    text-align: center;
    font-size: var(--step-3);
    line-height: 1.2;
  }
  .wrapper-events.detail {
    border-radius: 15px;
    padding: 50px 20px 20px 20px;
  }
  .wrapper-events.gruen .card.event {
    border-bottom: 2px solid var(--gruen-mittel);
    background: var(--gruen-hell-hell-hauch);
    border-radius: 0;
  }
  .wrapper-events.blau .card.event {
    border-bottom: 2px solid var(--blau-mittel);
    background: var(--blau-hell-hell-ganz);
    border-radius: 0;
  }
  .card.event:nth-child(odd) {
  background: transparent;
  }
  .wrapper-events.gruen .event-info,
  .wrapper-events.blau .event-info {
    justify-content: flex-start;
    width: 100%;
    gap: 0;
    padding: 1rem;
    overflow: hidden;
    border-radius: 0;
    border-bottom: 2px solid var(--gruen-mittel);
  }
  .wrapper-events.blau .event-info {
    border-bottom: 2px solid var(--blau-mittel);
  }
  .wrapper-events.detail .card.event,
  .event-info p {
    margin-bottom: 0;
  }
  .event-info .event-date,
  .event-info .event-designation {
    position: relative;
    width: 25%;
  }
  .event-info .event-date .date  {
    color: #000;
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
  }
  .event-info .event-date .typ,
  .event-info .event-typ p,
  .event-info .event-facts,
  .event-info .event-designation {
    display: block;
    font-size: var(--step--1);
    font-weight: 400;
  }
  .event-info .event-facts {
    font-weight: 600;
  }
  .event-info .event-typ {
    transform: scale(1);
    transition: all 0.45s ease-in-out;
  }
  .event-info .event-typ,
  .event-info .event-facts {
    width: 75%;
    margin: 0;
    padding: 0;
  }
  .event-info .event-typ,
  .event-info .event-facts {
    padding-left: 20px;
  }
  .event-info .event-date,
  .event-info .event-designation {
    text-align: right;
  }
  .event-info .event-typ h3 {
    font-size: 1.6rem;
    margin-bottom: 0.25rem !important;
    text-align: left;
    padding: 0;
    margin: 0;
    color: var(--blau);
    text-wrap: unset;
    font-weight: 600;
  }
  .event-info .event-typ h3 a {
    text-decoration: underline;
  }
  .event-info .event-typ,
  .event-info .event-facts {
    padding-left: 40px;
  }
  .event-info .event-date,
  .event-info .event-designation {
    text-align: right;
  }
  .event-info .card-text .detail {
    font-size: 1.6rem;
    margin-bottom: 0.25rem !important;
    text-align: left;
    padding: 0;
    margin: 0;
    color: var(--blau);
    text-wrap: unset;
    font-weight: 600;
  }
  .wrapper-events.gruen .card.event.komplett-verlinkt:hover,
  .wrapper-events.gruen .card.event.komplett-verlinkt:focus-visible {
    background: var(--gruen-hell);
  }
  .wrapper-events.blau .card.event.komplett-verlinkt:hover,
  .wrapper-events.blau .card.event.komplett-verlinkt:focus-visible {
    background: var(--blau-hell-hell);
  }
  .card.event.komplett-verlinkt:hover .event-typ,
  .card.event.komplett-verlinkt:focus-visible .event-typ {
    transform: scale(1.04);
    transition: all 0.45s ease-in-out;
  }
  .wrapper-events.gruen .event-info:last-child,
  .wrapper-events.gruen .card.event:last-child,
  .wrapper-events.blau .event-info:last-child,
  .wrapper-events.blau .card.event:last-child {
    border-bottom: 0;
  } 
  .card.event.komplett-verlinkt:hover .event-info .event-typ h3,
  .card.event.komplett-verlinkt:focus-visible .event-info .event-typ h3 {
    color: #000;
  }

  /*~~~~~~~ anker nur für entwurf ~~~~~~~~~*/
  #termin {
    scroll-margin-top: 140px;
  }
  /*~~~~~~~ anker nur für entwurf ~~~~~~~~~*/

  .card.alsListe {
    width: min(1000px, 100%);
    padding: 2rem 0;
    border-bottom: 1px solid var(--blau-mittel);
  }
  .card.alsListe figure {
    position: relative;
    width: 30%;
    aspect-ratio: 4 / 3;
    display: inline-block;
    overflow: hidden;
    margin: 0;
    padding: 0;
    vertical-align: top;
    line-height: 0;
    border-radius: 10px;
  }
  .card.alsListe.logos-bewertung figure {
    width: 30%;
    aspect-ratio: 1 / 1;
  }
  .card.alsListe p.figure-copyright {
    font-size: 70%;
  }
  .card.alsListe .listentext {
    flex: 1 1 60%;
    width: 70%;
    vertical-align: top;
    padding: 0 5px 10px 0;
  }
  .card.alsListe.ohneBild .listentext {
    margin-left: 0;
  }

  /* ~~~ Copyright bei Bildern ~~~*/
  p.figure-copyright {
    position: absolute;
    z-index: 100;
    left: 0;
    bottom: -1px;
    font-size: var(--step--2);
    line-height: 120%;
    color: #fff;
    text-shadow: 1px 1px 2px var(--blau-dunkel), -1px -1px 2px var(--blau-dunkel);
    margin: 0;
    padding: 3px 0 4px 0;
    transition: all 0.2s ease-in-out;
  }
  p.figure-copyright::after {
    margin: 0;
  }
  p.figure-copyright:hover {
    background: rgba(255, 255, 255, 0.8);
    border-top-right-radius: 10px;
    text-shadow: none;
    color: #000;
  }
  p.figure-copyright::before {
    content: "© ";
    padding: 3px 3px 3px 5px;
  }
  .figure-copyright-content {
    opacity: 0;
    border-top-right-radius: 50%;
    overflow: hidden;
    transition: all 0.2s ease-in-out;
  }
  p.figure-copyright:hover .figure-copyright-content {
    opacity: 1;
    padding: 3px 10px 4px 0;
  }
  .card.alsListe figure.bild p.figure-copyright {
    bottom: 0;
  }

  /* ~~~ Video ~~~ */
  .videobox {
    position: relative;
    display: block;
    width: min(1000px, 100%);
    margin: 0 auto 30px auto;
    padding: 0;
  }
  .video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
  }
  .videobox,
  .videobox video {
    position: relative;
    width: 100%;
    height: 100%;
    display: block;
  }
  /* Für Video iframe*/
  .video-extern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* ~~~~~~~ address ~~~~~~~ */
  address {
    margin: 0;
  }

  /* ~~~~~~~ Footer ~~~~~~~ */
  footer {
    padding: 2rem 0.5rem 7rem 0.5rem;
    position: relative;
  }
  footer .nav-footer {
    position: relative;
    background: var(--gruen-hell);
    padding: 1.5rem 0;
    width: 100%;
  }
  .nav-footer ul {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
  }
  .nav-footer ul li a,
  .nav-footer ul li a:link {
    display:block;
    color: var(--blau-dunkel-mittel);
    padding: 0.5rem 1.0rem;
    text-decoration: none;
    font-size: var(--step-0);
    font-size: 1.2rem;
    font-weight: 600;
    transform: scale(1);
  }
  .nav-footer ul li a:hover,
  .nav-footer ul li a:focus-visible {
    color: #000;
    transform: scale(1.15);
  }
  .nav-footer ul li.akt a,
  .nav-footer ul li.akt a:link,
  .nav-footer ul li.akt a:hover,
  .nav-footer ul li.akt a:focus-visible {
    color: #000;
    font-weight: 800;
    transform: scale(1);
  }
  .copyright {
    width: 100%;;
    margin: 15px auto;
    text-align: center;
    font-size: var(--step--1);
    font-weight: 300;
  }
  #pfeil-top-cont {
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    height: 100px;
    width: 100%;
  }
  .pfeil-top {
    position: relative;
    width: 70px;
    height: 70px;
  }
  .pfeil-top a,
  .pfeil-top a:link {
    display: block;
    z-index: 300;
    width: 100%;
    height: 100%;
    border: 2px solid var(--gruen-dunkel);
    border-radius: 50%;
    background: transparent;
    transform-origin: center bottom;
    transform: scale(1);
  }
  .pfeil-top a:focus-visible,
  .pfeil-top a:hover {
    background: var(--gruen-dunkel);
    transform: scale(1.075);
  }
  .pfeil-top a::after,
  .pfeil-top a:link::after {
    content: " ";
    position: absolute;
    top: 27px;
    left: 23px;
    display: inline-block;
    width: 20px;
    height: 20px;
    border-Left: 2px solid var(--gruen-dunkel);
    border-top: 2px solid var(--gruen-dunkel);
    transform: rotate(45deg);
  }
  .pfeil-top a:focus-visible::after,
  .pfeil-top a:hover::after {
    top: 23px;
    border-Left: 2px solid #fff;
    border-top: 2px solid #fff;
  }
  
  /* ~~~~~~~~~~~~~~ slick-slider ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  .slider-bannerbild,
  .slider-01 {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 1.5rem 0 0 0;
  }
  .slider-bannerbild {
    padding: 1.5rem 0;
  }
  .slider-bannerbild .slick-slide,
  .slider-01 .slick-slide {
    margin: 0;
    transition: all 0.4s ease-in-out;
    margin: 0 7px;
    width: 100%;
    max-width: 1200px;
  }
  .slider-01  .slick-slide img {
    width: 100%;
    transition: all 0.4s ease-in-out;
  }
  .slider-bannerbild .slick-prev,
  .slider-01 .slick-prev {
    left: -45px;
  }
  .slider-bannerbild .slick-next,
  .slider-01 .slick-next {
    right: -45px;
  }
  .slider-01 .slick-slide {
    opacity: 0;
    pointer-events: none; /* keine Klicks auf inaktive */
  }
  .slider-01 .slick-slide.slick-active {
    opacity: 1;
    pointer-events: auto;
  }

  /* ===== Slider Pfeile & Dots ===== */
  .slider-bannerbild .slick-prev,
  .slider-bannerbild .slick-next,
  .slider-01 .slick-prev,
  .slider-01 .slick-next {
    position: absolute;
    top: 40%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    background: var(--gruen-dunkel-dunkel);
    opacity: 0.5;
    border-radius: 50%;
    cursor: pointer;
    transform: scale(1);
    z-index: 5;
    transition: all 0.2s ease-in-out;
  }
  .slider-01 .slick-prev,
  .slider-01 .slick-next {
    top: 25%;
  }
  .slider-01 .slick-prev:hover,
  .slider-01 .slick-next:hover,
  .slider-01 .slick-prev:focus-visible,
  .slider-01 .slick-next:focus-visible,
  .slider-bannerbild .slick-prev:hover,
  .slider-bannerbild .slick-next:hover,
  .slider-bannerbild .slick-prev:focus-visible,
  .slider-bannerbild .slick-next:focus-visible {
    opacity: 1.0;
    transform: scale(1.1);
    transition: all 0.2s ease-in-out;
  }
  .slider-01 .slick-prev,
  .slider-01 .slick-next,
  .slider-bannerbild .slick-prev,
  .slider-bannerbild .slick-next,
  .slider-bannerbild .slick-dots li button::before,
  .slider-01 .slick-dots li button::before {
    overflow: hidden;
    border-radius: 50%;
  }
  .slider-bannerbild .slick-dots li button::before,
  .slider-01 .slick-dots li button::before {
    border: 2px solid var(--gruen-dunkel);
  }
  /* Icons per ::before ERZEUGEN */
  .slider-bannerbild .slick-prev::before,
  .slider-bannerbild .slick-next::before,
  .slider-01 .slick-prev::before,
  .slider-01 .slick-next::before {
    content: "";
    display: block;
    width: 44px;
    height: 44px;
    background: transparent url(../images/pfeil-weiter.svg) 0 0  no-repeat;
    background-size: cover;
    transform-origin: center center;
  }
  .slider-bannerbild .slick-prev::before,
  .slider-01 .slick-prev::before {
    transform: scaleX(-1);
  }
  .slider-01 .slick-prev:active::before,
  .slider-01 .slick-next:active::before {
    transform: scale(0.95); 
  }
  .slider-01 .slick-prev.slick-disabled::before,
  .slider-01 .slick-next.slick-disabled::before {
    opacity: 0.35;
    cursor: default;
  }
  /* .slider-01 .slick-prev,  */
  .slider-bannerbild .slick-prev {
    left: 8px;
    opacity: 0.85;
  }
  /* .slider-01 .slick-next,  */
  .slider-bannerbild .slick-next {
    right: 8px;
    opacity: 0.85;
  }
  /* 4) Dots: NICHT die <li> einfärben (die verdecken nur),
      sondern das Button-::before wie bei Slick-Klassik */
  .slider-bannerbild .slick-dots li,
  .slider-01 .slick-dots li {
    margin: 0 8px;
    height: 20px;
    width: 20px;
    background: transparent;
    border-radius: 0;
  }
  .slider-bannerbild .slick-dots li button,
  .slider-01 .slick-dots li button {
    width: 20px;
    height: 20px;
    padding: 0;
  }
  .slider-bannerbild .slick-dots li button::before,
  .slider-01 .slick-dots li button::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    opacity: 0.35;
    transform: scale(1);
    background: var(--gruen-dunkel);
  }
  .slider-bannerbild .slick-dots li button:hover::before,
  .slider-01 .slick-dots li button:hover::before {
    opacity: 1;
    transform: scale(1.25);
    background: var(--gruen-dunkel);
  }
  .slider-bannerbild .slick-dots li button:focus-visible::before,
  .slider-01 .slick-dots li button:focus-visible::before {
    outline: 2px solid var(--gruen-dunkel);  
    outline-offset: 2px; 
  }
  .slider-bannerbild .slick-dots li.slick-active button::before,
  .slider-01 .slick-dots li.slick-active button::before {
    opacity: 1;
    transform: scale(1.25);
  }
  .slick-dots {
    position: relative;
    bottom: 0;
  }
  .slick-dots ul {
    margin: 0;
  }
  .slick-dotted.slick-slider {
    margin-bottom: 20px;
  }
  /* Viewport sauber einkapseln */
  .slider-bannerbild .slick-list {
    overflow: hidden;
    line-height: 0; 
  }

  /* TRACK robust gegen Umbruch: eine Zeile, keine zweite Reihe → kein Leerraum */
  .slider-bannerbild .slick-track {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    margin: 0 !important;
  }

  /* Slides: als Flex-Items (Slick setzt die Breite inline; wir übernehmen nur das Layout) */
  .slider-bannerbild .slick-slide {
    float: none !important; /* Floats aus → Flex übernimmt */
    display: block;
    height: auto !important;
    margin: 0 !important;   /* Sicherheitsnetz gegen Theme-Abstände */
  }
  /* Bild im Slide: block-level & volle Breite → keine Baseline-Lücke */
  .slider-bannerbild .slick-slide img {
    display: block;
    width: 100%;
    height: auto;
  }

  /*~~~~~~~~~~~~~ form-feld eingeklappt ~~~~~~~~~~~~~~*/
  .faq-liste,
  .rahmen.faq, 
  .rahmen.drop-down {
    position: relative;
    width: min(100%, 800px);
    margin: 1rem auto;
  }
  .rahmen.drop-down > input.toggle{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .faq-liste {
    margin: 2rem auto;
  }
  .details,
  .details.faq,
  .details.drop-down,
  .rahmen.faq > .details.faq,
  .rahmen.drop-down > .details.drop-down {
    padding: 0rem 2rem 1rem 2rem;
    background: var(--gelb-hell-heller);
    border-radius: 15px;
    display: flow-root;
  }
  .rahmen.drop-down > .details.drop-down {
    padding: 0;
    background: var(--gelb-hell-heller);
    border-radius: 15px;
    display: flow-root;
  }
  .toggle,
  .toggle.offen {
    position: absolute;
    width: 20px;
    height: 20px;
    outline: 0;
    display: inline-block;
    appearance: none;
  }
  .toggle.offen + label,
  .rahmen.auswahl-formular .toggle + label,
  .rahmen.faq > summary,
  .rahmen.drop-down > summary,
  .toggle + label {
    position: relative;
    background: var(--gelb-hell-hell);
    color: #000;
    width: 100%;
    font-weight: 700;
    line-height: 130%;
    text-align: left;
    padding: 1rem;
    border-radius: 15px;
    display: block;
    cursor: pointer;
    transition: all 0.35s ease-in-out;
  }
  .rahmen.drop-down > summary h2,
  .rahmen.drop-down label h2 {
    font-size: var(--step-1);
    margin: 0;
    font-weight: 700;
  }
  /* Safari Marker entfernen */
  .rahmen.faq > summary::-webkit-details-marker,
  .rahmen.drop-down > summary::-webkit-details-marker {
    display: none;
  }
  .rahmen.faq .toggle + label,
  .rahmen.drop-down .toggle + label {
    padding: 1rem 2rem 1rem 1.5rem;
  }
  .rahmen.faq > summary:hover,
  .rahmen.faq > summary:focus-visible,
  .rahmen.drop-down > label:hover,
  .rahmen.drop-down > label:focus-visible {
   background: var(--gelb-mittel);
   transform: scale(1.025);
  }
  .rahmen.drop-down label:focus-visible,
  .rahmen.faq input.toggle:focus-visible + label {
    outline: 2px solid #000;
    outline-offset: 2px;
  }
  .toggle.offen + label,
  .rahmen.auswahl-formular .toggle.offen + label {
    max-height: 0vh;
    opacity: 0;
    padding: 0;
  }
  .toggle + label::after,
  .form-box.select::after,
  .rahmen.faq > summary::after,
  .rahmen.drop-down > summary::after {
    content: "";
    position: absolute;
    top: 20px;
    right: 15px;
    width: 1rem;
    height: 1rem;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(-45deg);
    transition: transform var(--anim) var(--easing);
  }
  .form-box.select::after {
    top: 8px;
    transform: rotate(45deg);
  }
  .details.drop-down a,
  .details.drop-down a:link {
    display: block;
    text-decoration: none;
    transform: scale(1);
    padding: 0 1rem;
    color: #000;
  } 
  .details.drop-down a:hover,
  .details.drop-down a:focus-visible {
    transform: scale(1.035);
  }
  .details.drop-down li,
  .details.drop-down ul {
    margin: 0;
    padding: 0;
  }
  .details.drop-down li {
    background: none;
    padding: 0.5rem 1rem;
  }
  .details.drop-down li:nth-child(odd)  {
    background-color: var(--gruen-hell-hell-hauch);
  }
  /* ~~~~~~~~~~~~~~ universelle Panel-Animation ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  .slide-panel {
    overflow: hidden;
    height: 0;
    opacity: 0;
    padding-bottom: 0;
    transform: translateY(-6px);
    transition:
      height .6s cubic-bezier(.4,0,.4,1),
      opacity .6s ease,
      transform .6s ease;
  }
  .is-open > .slide-panel {
    opacity: 1;
    transform: translateY(0);
    padding-bottom: 1rem;
  }
  /* Cursor */
  .rahmen.faq summary {
    cursor: pointer;
  }
  .rahmen.drop-down label {
    cursor: pointer;
    display: block;
  }
  /* reduce motion */
  @media (prefers-reduced-motion: reduce) {
    .slide-panel {
      transition: none;
      transform: none;
    }
  }
  /* ~~~~~~~~~~~~~~ ENDE universelle Panel-Animation ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  /* Checkbox unsichtbar aber zugänglich */
  .toggle-formular {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow :hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    border: 0;
  }
  /* Formular standardmäßig verstecken */
  .toggle-formular + label + .auswahl-suche-feld {
    display: none;
  }
  /* Checkbox aktiv → Formular anzeigen */
  .toggle-formular:checked + label + .auswahl-suche-feld {
    display: block;
  }
  /* Text im Label umschalten */
  .toggle-formular + label .txt-close{ 
    display:none; 
  }
  .toggle-formular:checked + label .txt-open{ 
    display:none; 
  }
  .toggle-formular:checked + label .txt-close{ 
    display:inline; 
  }
  /* Label Styling */
  .toggle-suche-link {
    cursor: pointer;
    display: block;
    width: fit-content;
    margin: 0 auto 1rem auto;
    text-decoration: none;
    padding: 5px 10px;
    background: var(--weiss);
    border: 2px solid var(--blau-dunkel-mittel);
    border-radius: 7px;
    font-size: var(--step--1);
    font-weight: 600;
    color: var(--blau-dunkel-mittel);
    transform: scale(1);
  }
  .toggle-suche-link:hover,
  .toggle-suche-link:focus-visible {
    background: var(--blau-dunkel-mittel);
    transform: scale(1.035);
    color: var(--weiss);
  }
  .toggle-formular:focus-visible + label{
    outline: 2px solid #000;
    outline-offset: 3px;
    border-radius: 4px;
  }

  /* ~~~~~~~~~~~~~~~~~~~~~~~~~~ Formulare ~~~~~~~~~~~~~~~~~~~*/ 
  form {
    font-size: var(--step-0);
  }
  form a {
    text-decoration: none;
  }
  form a:hover,
  form a:focus-visible {
    text-decoration: underline;
  }

  /*~~~~~~ eingabe ~~~~~~*/
  ::placeholder {
    color: var(--blau-dunkel);
    opacity: 1;
    transition: opacity var(--anim-slow) ease;
  }
  :focus-visible::placeholder {
    opacity: 0;
  }
  input,
  select,
  textarea,
  button {
    font-size: inherit;
    font-family: inherit;
  }
  .form-box-container {
    display: flex;
    align-items: center;
    width: 100%;
    margin: 0 0.75rem 0.75rem 0;
    font-size: var(--step-0);
  }
  .form-box .label {
    flex: 0 0 25%; 
    padding-right: 0.375rem;
    text-align: right;
  }
  .form-box .input {
    line-height: 1.5rem;
    padding: 0 0.375rem;
  }
  .form-box input[type="text"],
  .form-box input[type="email"] {
    position: relative;
    height: 40px;
    padding: 10px;
    border-radius: 7px;
    margin: 0.5dvh auto 0 auto;
    border: 1px dotted var(--blau-dunkel-mittel);
    flex: 1 1 auto;
    min-width: 0;  
    background: var(--weiss);
  }
  .form-box input[type="text"].schmal,
  .form-box input[type="email"].schmal,
  .form-box-container select.schmal {
    height: 40px;
    width: 100%;
    max-width: 290px;
    margin: 0.25dvh 0 0 0;
  }
  .form-box.texteingabe input[type="text"]{
    flex: 0 0 auto;
    width: 100%;
  }
  /*~~~~~~ Formular Funktion ~~~~~~~~~~~~~~*/

  /* Formular-Felder */
  .form-box {
    height: auto;
    padding: 0;
  }
  .sup {
    line-height: inherit;
    font-size: var(--step--1);
    vertical-align: top;
  }
  .form-box.auswahl-formular,
  .form-box.plz {
    width: 49%;
    display: inline-block;
  }
  .form-box.plz {
    max-width: 180px;
    margin-left: 2%;
  }
  .form-box.auswahl-formular label,
  .form-box.plz label {
    display: block;
    width: 100%;
  }
  .form-box.check {
    max-height: 50px;
    margin-bottom: 5px;
    font-weight: 600;
  }
  .form-box.check.agb {
    margin-left: 25%;
  }
  .form-box.check.sub {
    margin-left: 25px;
    font-weight: 300;
  }
  .form-box.check.sub-sub {
    margin-left: 50px;
    font-weight: 300;
  }

  /* Labels */
  .form-box.check label {
    display: inline-block;
  }
  .form-box.auswahl-formular label,
  .form-box.plz label {
    margin: 0 0 7px 0;
  }
  .form-box input,
  .form-box select,
  .form-box textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    outline: 0;
    box-shadow: none;
    height: 40px;
    font-size: var(--step-0);
    background: none;
  }
  .form-box textarea {
    resize: vertical;
    border: 1px dotted var(--blau-dunkel-mittel);
    border-radius: 4px;
    padding: 5px 10px;
    transition: all 0.4s ease-in-out;
    width: 100%;
    min-height: 100px; 
    background: var(--weiss);
  }
  .form-box textarea:hover,
  .form-box textarea:active,
  .form-box textarea:focus-visible {
    box-shadow: inset 0 2px 1px 0 rgba(0, 0, 0, 0.2);
    transition: all 0.4s ease-in-out;
  }
  
  /*~~~~~~~~~~~ Select ~~~~~~~~~~~*/
  .form-box.select {
    position: relative;
    display: flex;
    width: max(100%, 250px);
    height: auto;
    overflow: hidden;
    margin: 0.25dvh auto 0 auto;
  }
  .form-box.select.left {
    margin: 0.5rem 0;
  }
  .form-box select {
    width: 100%;
    height: 40px;
    margin: 0;
    box-shadow: var(--box-shadow);
    border-radius: 7px;
    border: 1px dotted var(--blau-dunkel);
    font-weight: 400;
    padding: 0 20px 0 10px;
    color: var(--blau-dunkel-mittel);
    background: var(--weiss);
  }
  .form-box select + label{
    font-weight: 600;
  }
  .form-box input.kurz {
    width: 33%;
  }
  .form-box select:hover,
  .form-box select:focus-visible {
    background: var(--blau-hell-hell);
    transition: all 0.4s ease-in-out;
    cursor: pointer;
  }
  .form-box select:hover option,
  .form-box select:focus-visible option {
    background: #fff;
    border-radius: 0;
  }
  .form-box.texteingabe {
    width: min(100%, 290px);
    margin: 0.5dvh auto 0 auto;
    height: 40px;
    border-radius: 7px;
    border: 1px dotted var(--blau-dunkel);
    background: var(--weiss);
    font-weight: 400;
    padding: 0 10px;
    color: var(--blau-dunkel-mittel);
  }
  .ort,
  .art {
    width: 49%;
    display: inline-block;
    vertical-align: top;
  }
  .art {
    font-style: italic;
  }
  /* Hide browser-styling in IE10 */
  .form-box select::-ms-expand {
    display: none;
  }
  /* Hide custom-icons in lower versions of Internet Explorer (< IE10). */
  .lt-ie10 .form-box select {
    background-image: none;
  }
  /* graceful degradation for ie8 */
  .form-box input[type="checkbox"],
  .form-box input[type="radio"] {
    position: absolute;
    width: auto;
    float: left;
    margin-right: 0.75em;
    background: transparent;
    border: none;
  }
  /* hide standard inputs" */
  .form-box input[type="checkbox"]:checked,
  .form-box input[type="checkbox"]:not(:checked),
  .form-box input[type="radio"]:checked,
  .form-box input[type="radio"]:not(:checked) {
    background: transparent;
    position: absolute;
    margin: 0;
    padding: 0;
    top: -1000px;
    left: -1000px;
    outline: 0;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
  }
  .form-box input[type="checkbox"] + label,
  .form-box input[type="radio"] + label {
    cursor: pointer;
    position: relative;
    display: block;
    margin-left: 0;
    text-indent: 0;
    padding: 0.25dvh 0 0 30px;
    list-style: none;
    font-weight: 400;
    font-size: var(--step-0);
    line-height: 140%;
  }
  .form-box input[type="checkbox"]:checked + label::before,
  .form-box input[type="checkbox"]:not(:checked) + label::before,
  .form-box input[type="radio"]:checked + label::before,
  .form-box input[type="radio"]:not(:checked) + label::before {
    content: "";
    display: inline-block;
    width: 23px;
    height: 23px;
    position: relative;
    top: 0.25em;
    left: 0;
    border: 1px dotted var(--blau-dunkel-mittel);
    margin: 0;
    background: var(--weiss);
    border-radius: 3px;
  }
  .form-box input[type="radio"]:checked + label::before,
  .form-box input[type="radio"]:not(:checked) + label::before {
    border-radius: 50%;
    margin: 7px 7px 0 -30px;
  }
  .form-box input[type="checkbox"]:checked + label::after {
    display: block;
    content: "";
    position: absolute;
    top: 10px;
    left: 9px;
    width: 6px;
    height: 12px;
    transform: rotate(45deg);
    border: 2px solid var(--weiss);
    border-top: 0;
    border-left: 0;
  }
  /* hover - focus */
  .form-box input[type="checkbox"]:hover + label::before,
  .form-box input[type="checkbox"]:focus-visible + label::before,
  .form-box input[type="checkbox"] + label:hover::before,
  .form-box input[type="checkbox"] + label:focus-visible::before,
  .form-box input[type="radio"]:hover + label::before,
  .form-box input[type="radio"]:focus-visible + label::before,
  .form-box input[type="radio"] + label:hover::before,
  .form-box input[type="radio"] + label:focus-visible::before {
    background: var(--blau-dunkel-mittel);
    transition: all 0.4s ease-in-out;
  }
  .form-box input[type="checkbox"] + label:hover,
  .form-box input[type="checkbox"] + label:focus-visible,
  .form-box input[type="radio"]:hover + label,
  .form-box input[type="radio"]:focus-visible + label {
    color: var(--blau-dunkel-mittel);
  }

  /* checked */
  .form-box input[type="checkbox"]:checked + label::before,
  .form-box input[type="radio"]:checked + label::before {
    background: var(--blau-dunkel-mittel);
    transition: all 0.4s ease-in-out;
  }
  .form-box input[type="radio"]:checked + label::before {
    box-shadow: inset 0 0 0 3px var(--weiss);
  }
  .form-box input[type="radio"]:checked + label::after {
   left: 7px;   /* statt -21px */
    top: 0.45em; /* ggf. feinjustieren */
    width: 8px;
    height: 8px;
  }
   /* Änderung */
  .form-box input[type="checkbox"] + label::before,
  .form-box input[type="checkbox"]:checked + label::before,
  .form-box input[type="checkbox"]:not(:checked) + label::before {
    position: absolute;
    left: 0;
    top: 0.25em;
    margin: 0;
    display: block;/* statt inline-block */
  }
  .form-box input[type="checkbox"]:checked + label::after {
    top: 0.45em;
  }
  .form-box-label {
    font-weight: 700;
    margin-bottom: 0.35rem;
  }
  fieldset {
    border: 0;
  }

  /*~~~~~~ suchfelder für auswahl-formular ~~~~~~*/
  .form-feld {
    position: relative;
    width: 100%;
    /* margin: 2dvh auto; */
    border-radius: 1rem;
    padding: 0.25rem 1rem 0.75rem 1rem;
    background: var(--gelb-hell-heller);
  }
  .auswahl-suche-feld,
  .auswahl-suche-ergebnis-rahmen {
    width: min(100%, 1200px);
    margin: 1dvh auto 2dvh auto;
  }
  .form-feld .spalte-vier,
  .form-feld .saison-speisen,
  .form-feld .saison-speisen .saison,
  .form-feld .saison-speisen .speisen,
  .form.feld .erklaer-text,
  .auswahl-suche-ergebnis .bewertung {
    max-width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    margin: 0;
  }
  .form-feld .spalte-vier {
    padding-bottom: 0.5rem;
    border-bottom: 1px dotted var(--blau-dunkel-mittel);
    margin:  0 auto 0.5rem auto;
  } 
  .form-feld .spalte-vier .form-box {
    flex-basis: calc(100% / 4);
  }
  .form-feld .spalte-vier .form-box.select {
    flex-basis: calc(100% / 2);
    max-width: 290px;
  }
  .form-feld .erklaer-text {
    padding: 0.5rem 0.5rem 0 0.5rem;
    justify-content: center;
    text-align: center;
    margin: 0;
  }
  .form-feld .max-breite {
    max-width: 640px; 
    margin:  0 auto 0.5rem auto;
  }
  .form-feld .min-breite {
    max-width: 290px; 
    margin:  0 auto 0.5rem auto;
  }
  .form-feld .min-breite .texteingabe {
    width: 290px;
    max-width: 290px;
    margin-bottom: 8px;
  }
  .form-feld .saison-speisen .saison {
    flex-direction: column;
    justify-content: flex-start;
    flex: 1 0 auto;
    margin: 0 0.75rem 0 0;
    border-right: 1px dotted var(--blau-dunkel-mittel);
  }
  .form-feld .saison-speisen .speisen {
    flex: 0 1 80%;
  }
  .form-feld .saison-speisen .speisen .form-box.check {
    flex: 1 0 32%;
  }
  .form-feld h2,
  .form-feld h3 {
    font-size: var(--step-2);
    margin: 0;
    text-align: center;
  }
  .form-feld legend,
  .rechnungsadresse legend {
    font-size: var(--step-0);
    color: var(--blau-dunkel-mittel);
    text-transform: uppercase;
    font-weight: 600;
  }
  .rechnungsadresse legend {
    border-top: 1px dotted var(--blau-dunkel-mittel);
    padding: 1rem 0 1rem 25%;
    width: 100%;
  }
  .rechnungsadresse .normal {
    color: #000;
    text-transform: none;
    font-weight: 400;
  }

   /*~~~~~~ Ergebnis Card~~~~~~*/

  .card.ergebnis {
    border: 1px dotted var(--blau-dunkel-mittel);
    border-radius: 15px;
    width: max(31%, 290px);
  }
  .card.ergebnis .firma {
    background: var(--gelb-hell-hell);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60px;
  }
  .card.ergebnis.gewerbe .firma,
  .card.ergebnis.blau .firma {
    background: var(--blau-hell-hell);
  }
  .card.ergebnis.haushalt .firma,
  .card.ergebnis.gruen .firma {
    background: var(--gruen-mittel);
  }
  .card.ergebnis .firma h3,
  .card.ergebnis .firma h3 a,
  .card.ergebnis .firma h3 a:link,
  .card.ergebnis .firma a,
  .card.ergebnis .firma a:link,
  .card.ergebnis .produkt p,
  .card.ergebnis.textilien .anbieter p,
  .card.ergebnis.textilien h3 {
    font-size: var(--step-0);
    margin: 0;
    padding: 0;
    text-align: center;
    color: #000;
  }
  .card.ergebnis .produkt p.produkt-name {
    font-weight: 800;
    font-size: 1.35rem;
  }
  .card.ergebnis .produkt p.produkt-art {
    font-size: var(--step--1);
  }
  .card.ergebnis .firma h3 a,
  .card.ergebnis .firma h3 a:link,
  .card.ergebnis .firma a,
  .card.ergebnis .firma a:link {
    text-decoration: none;
    position: relative;
  } 
  .card.ergebnis .firma h3 {
    width: 100%;
  }
  .card.ergebnis .firma h3 a:hover,
  .card.ergebnis .firma h3 a:focus-visible,
  .card.ergebnis .firma a:hover,
  .card.ergebnis .firma a:focus-visible {
    text-decoration: underline;
    color: var(--blau-dunkel-mittel);
  }
  .card.ergebnis .firma h3 a::after,
  .card.ergebnis .firma h3 a:link::after,
  .card.ergebnis .firma a::after,
  .card.ergebnis .firma a:link::after {
    content: "";
    display:inline-block; 
    margin: 5px 5px 0 5px;
    width: 17px;
    height: 17px;
    inset: 0;
    background: transparent url(../images/icon-extern-link.svg) 0 0 no-repeat;
    background-size: cover;
  } 
  .card.ergebnis.textilien {
    justify-content: flex-start;
  }
  .card.ergebnis .produkt,
  .card.ergebnis.textilien .anbieter {
    padding: 0.5rem;
  } 
  .card.ergebnis.textilien .anbieter p {
    text-align: left;
  }
  .card.ergebnis.textilien .bewertung {
    flex-flow: row wrap;
  }
  .card.ergebnis .bewertung {
    border-top: 1px dotted var(--blau-dunkel-mittel);
    padding: 0.5rem 0.5rem 0 0.5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
  .card.ergebnis .bewertung .bewertung-logo,
  .card.ergebnis.textilien .bewertung .bewertung-logo {
    width: 20%;
    padding: 3px;
    align-self: center;
  }
  .card.ergebnis .bewertung .bewertung-logo a img,
  .card.ergebnis .bewertung .bewertung-logo a img {
    width: 100%;
    height: 100%;
    transform: scale(1);
  }
  .card.ergebnis .bewertung .bewertung-logo a:hover img,
  .card.ergebnis .bewertung .bewertung-logo a:focus-visible img {
    transform: scale(1.2);
  }

  /* ~~~~~~~~~~~ Buttons ~~~~~~~~~~~~~~*/
  .cont-buttons {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 1dvh;
  }
  .submit,
  .submit.finish,
  .submit.update,
  .form-box .submit {
    width: auto;
    margin: 0;
    padding: 1rem;
    font-size: 1.3rem;
    font-weight: 600;
  }
  .submit,
  .submit.finish,
  .submit.update,
  .form-box > button[type="submit"],
  .form-box.submit.suche {
    width: 100%;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 44px;           
    padding: 0.9rem 1.1rem;
    border-radius: 10px;
    background: var(--gelb-dunkel);
    color: #000;
    font-weight: 600;
    font-size: var(--step-0);
    cursor: pointer;
    transform: scale(1);
    transition: all 0.45s ease-in-out;
  }
  .submit {
    width: 96%;
    margin: 0 auto;
  }
  .form-box.submit.suche.gewerbe,
  .form-box.submit.suche.blau {
    background: var(--blau-hell-hell);
    border: 1px dotted var(--blau-dunkel);
  }
  .form-box.submit.suche.haushalt,
  .form-box.submit.suche.gruen {
    background: var(--gruen-mittel);
    border: 1px dotted var(--blau-dunkel);
  }
  .form-box.submit.suche:focus-visible {
    outline: 2px solid #000;
    outline-offset: 3px;
  }
  .form-box.submit:hover,
  .form-box.submit:focus-visible,
  .form-box.submit.suche:hover,
  .form-box.submit.suche:focus-visible {
    background: var(--blau-dunkel);
    color: #fff;
    transform: scale(1.035);
    text-decoration: none;
  }
  .form-box.submit.suche .icon-suche {
    position: relative;
    display: inline-block;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
  }
  .form-box.submit.suche .icon-suche::before {
    content: "";
    position: absolute;
    inset: 0;
    background: transparent url(../images/icon-lupe-submit.svg) 0 0 no-repeat;
    background-size: cover;
  }
  .form-box.submit.suche:hover .icon-suche::before,
  .form-box.submit.suche:focus-visible .icon-suche::before {
    background: transparent url(../images/icon-lupe-submit-r.svg) 0 0 no-repeat;
    background-size: cover;
  }
  .submit.update:hover,
  .submit.update:focus-visible,
  .submit.finish:hover,
  .submit.finish:focus-visible,
  .form-box button[type="submit"]:hover,
  .form-box button[type="submit"]:focus-visible {
    color: #fff;
    background: var(--blau-dunkel);
    transition: all 0.45s ease-in-out;
    text-decoration: none;
    transform: scale(1.02);
    cursor: pointer;
  }
  .submit.update,
  .form-box button[type="reset"]:hover,
  .form-box button[type="reset"]:focus-visible {
    background: transparent;
    border: 1px dotted var(--blau-dunkel-mittel);
    transition: all 0.45s ease-in-out;
  }
  .submit.finish,
  .submit.update {
    max-width: 290px;
    margin: 0;
  }

  /* ~~~~~~~~~~~~~~~~~ FANCYBOX ~~~~~~~~~~~~~~~~~~~~ */
  .fancybox-button,
  .fancybox-infobar__body {
    background: var(--blau);
    opacity: 0.5;
  }
  .fancybox-button:hover {
    opacity: 1;
  }
  .fancybox-caption-wrap {
    background: var(--blau);
  }
  .fancybox-caption {
    padding: 30px 0;
    font-size: 120%;
    line-height: 100%;
    text-align: center;
    border-top: none;
    color: #fff;
  }
  .fancybox-infobar__body {
    display: inline-block;
    width: 70px;
    line-height: 44px;
    font-size: 1em;
  }
  .fancybox-button {
    width: 60px;
    height: 60px;
    line-height: 60px;
  }
  .fancybox-placeholder {
    box-sizing: content-box;
  }
  .fancybox-button--play::before,
  .fancybox-button--fullscreen::before {
    top: 23px;
    left: 25px;
  }
  .fancybox-button--thumbs::before {
    top: 27px;
    left: 27px;
  }
  .fancybox-placeholder::before {
    content: "";
    background: #fff;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .fancybox-controls {
    position: static;
  }
  .fancybox-button--left,
  .fancybox-button--right {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 88px;
    width: 88px;
    line-height: 88px;
  }
  .fancybox-button--left::after,
  .fancybox-button--right::after {
    width: 18px;
    height: 18px;
    margin: 18px;
  }
  .fancybox-button--left {
    left: 0;
  }
  .fancybox-button--right {
    right: 0;
  }
  .fancybox-infobar__body {
    position: absolute;
    top: 0;
  }
  .fancybox-infobar__body,
  .fancybox-button--left,
  .fancybox-button--right,
  .fancybox-buttons {
    z-index: 99994;
  }
  .fancybox-bg {
    background: rgba(0, 0, 0, 0.9);
  }
  .fancybox-infobar {
    display: block;
  }
  .fancybox-caption-wrap {
    padding: 0;
    background: linear-gradient(
      180deg,
      transparent 0,
      rgba(0, 0, 0, 0.1) 20%,
      rgba(0, 0, 0, 0.2) 40%,
      rgba(0, 0, 0, 0.6) 80%,
      rgba(0, 0, 0, 0.8)
    );
    opacity: 1;
    transition: opacity 0.2s;
  }
  .fancybox-container--ready .fancybox-bg {
    opacity: 0.95;
  }
  .fancybox-image,
  .fancybox-spaceball {
    width: 100%;
    height: 100%;
    top: 0%;
    left: 0%;
  }
  /* ~~~~~~~~~~~~~~~~~ ENDE FANCYBOX ~~~~~~~~~~~~~~~~~~~~ */

}

/* ================= max-width: 2005px ===================== */
@media (max-width: 2005px) {
  .brand {
    position: absolute;
    left: 10px;
  }
  .submenu2 {
    padding: 6vh 25%;
  }
  .header .headerbar.klein .submenu2 {
    padding: 2vh 25%;
  }
  .shop-link.akt {
    padding-top: 2.25%;
  }
}

/* ================= max-width: 1750px ===================== */
@media (max-width: 1750px) {
  .brand {
    width: 200px;
  }
  .header .headerbar.klein .brand {
    top: 5px;
    transform: scale(0.95);
  }
  .shop-link.akt {
    padding-top: 3%;
  }
}

/* ================= max-width: 1635px ===================== */
@media (max-width: 1635px) {
  .header {
    max-width: 100%;
    margin-left: 0;
  }
  .header .headerbar .nav-cont {
    max-width: 100%;
    border-radius: 0;
  }
  .cont-inhalt.volle-breite.blau::before, 
  .cont-inhalt.volle-breite.gruen::before {
    width: 400px;
    height:400px;
  }
}

/* ================= max-width: 1500px ===================== */
@media (max-width: 1500px) {
  .cont-inhalt {
    max-width: 70%;
  }
  .cont-inhalt.schmal {
    margin: 0 auto;
  }
}

/* ================= max-width: 1350px) ===================== */
@media (max-width: 1350px) {
  .submenu2 {
    padding: 4vh 17%;
  }
  .header .headerbar.klein .submenu2 {
    padding: 1rem 17%;
  }
  .header .headerbar.klein {
    justify-content: flex-end;
  }
  .header .headerbar.klein .trigger {
    width: 140px;
  }
  .hotline a, .shop-link a, .trigger {
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.4rem;
    width: 200px;
  }
  .shop-link.akt {
    padding-top: 3.5%;
  }
  h1 {
    font-size: 2em;
  }
  .einleitung,
  .cont-inhalt {
    margin: 3vh auto;
  }
  .einleitung {
    padding: 1rem 0 0 0;
  }
  .slider-nav {
    max-height: 100%;
    height: auto !important; 
    overflow-y: visible !important;
  }
  /* ~~~~~~~~~~~~~~ HEADER KLEIN ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  .header .headerbar.klein .nav {
    justify-content: flex-end;
  }
}

/* ================= max-width: 1290px) ===================== */
@media (max-width: 1290px) {
  /* .slider-bannerbild .slick-prev, */
  .slider-01 .slick-prev {
    left: -16px;
    opacity: 0.75;
  }
  /* .slider-bannerbild .slick-next, */
  .slider-01 .slick-next {
    right: -16px;
    opacity: 0.75;
  }
  .mega-bannerbild figure {
    height: 450px;
  }
  .mega-bannerbild img {
      width: 100%;
      height: 100%;
      object-fit: cover;
  }
  .mega-bannerbild .mega-text h2 {
    font-size: var(--step-2);
  }
  .mega-bannerbild .mega-text,
  .mega-bannerbild .mega-text.rechts {
    max-width: 360px;
    bottom: 4vh;
    right: 3vw;
  }
  .mega-bannerbild .mega-text.links {
    left: 3vw;
  }
}

/* ================= max-width: 1205px) ===================== */
@media (max-width: 1205px) {
  .nav-breadcrumb .breadcrumb {
    padding: 0 0 0.3rem 1.25vw;
  }
  .nav {
    gap: 0.75rem;
  }
  .einleitung,
  .cont-inhalt.volle-breite {
    padding: 2vh 1rem;
  }
  .cont-inhalt.volle-breite {
    width: 100%;
    padding: 4vh 5%;
    margin: 5vh 0;
  }
  .cont-inhalt.volle-breite.ohne-farbe {
    width: 100%;
    padding: 2vh 5%;
    margin: 0;
  }
  .cont-inhalt.volle-breite.referenzen {
    width: 100%;
    padding: 0 1%;
    margin: 0;
  }
  .cont-inhalt.volle-breite .einleitung {
    padding: 1vh 0;
    margin: 0 auto;
  }
  .cont-inhalt {
    margin: 0 auto;
    max-width: 80%;
  }
  .intro {
    margin: 2vh auto;
    padding: 1rem;
  }
  .card.thema {
    margin: 2vh auto;
    gap: 3%;
  }
  .card.thema.bild-links figure,
  .card.thema.bild-rechts figure {
    width: 37%;
  }
  .card.thema .button-link.komplett-verlinkt {
    padding: 0.75rem;
  }
  .einleitung,
  .wrapper-cards,
  .auswahl-suche-feld,
  .auswahl-suche-ergebnis-rahmen {
    width: 94%;
    margin: 1dvh auto;
  }
  .auswahl-suche-feld,
  .auswahl-suche-ergebnis-rahmen {
    margin: 1dvh auto 2dvh auto;
  }
}

/* ================= max-width: 1110x) ===================== */
@media (max-width: 1110px) {
  .hotline a, .shop-link a, .trigger {
    font-size: 1.0rem;
    width: 180px;
  }
}

/* ================= max-width: 1040px) (Mobile-Ansicht) ===================== */
@media (max-width: 1040px) {
  /* Mobile-Layout */
  .burger-btn {
    display: flex;
  }
  .header {
    margin: 0;
    height: 62px;
  }
  .header .headerbar {
    height: 62px;
}
  .header .headerbar,
  .header .headerbar.klein {
    top: 0;
  }
  .header .headerbar .nav-cont {
    border-radius: 0;
    background: #fff;
  }
  .brand,
  .header .headerbar.klein .brand {
    position: absolute;
    left: 5px;
    top: 5px;
    width: 170px;
    transform: scale(1);
  }
  /* ~~~~~~~~~~~~~~~~~ Lupe ~~~~~~~~~~~~~~~~~~~~ */
  label[for="lupe-cont"] {
    display: none;
  }
  #search-field {
    display: block;
    right: 90px;
    top: 5px;
    width: 200px;
    height: 40px;
    transform: scale(1);
    opacity: 1;
  }
  #suchstr, 
  #gobutton {
    display: block;
  }
  /* ~~~~~~~~~~~~~~~~~ Navi ~~~~~~~~~~~~~~~~~~~~ */
  .nav {
    margin: 0 0 0 30px;
    padding: 15px 0 00;
  }
  .nav > li {
    flex-grow: 1;
    width: 100%;
  }
  .submenu2 li:first-child {
    margin-top: 0;
  }
  .submenu2 li:last-child {
    margin-bottom: 0;
  }
  .trigger,
  .trigger.blau,
  .header .headerbar.klein .trigger {
    flex-flow: row nowrap;
    justify-content: center;
    padding: 0.75rem 0.75rem;
    border-radius: 0px;
    border-bottom: 1px solid var(--weiss);
    width:100%;
    height: auto;
    box-shadow: none;
    margin-top: 0px;
  }
  .header .headerbar.klein .trigger .begriff,
  .header .headerbar.klein .trigger .kategorie {
    transform: scale(1);
  }
  .header .headerbar.klein .trigger .kategorie {
    margin-top: 0;
  }
  .trigger .uns,
  .trigger .kategorie {
    font-size: 1.2rem;
    margin-left: 5px;
  }
  .trigger:hover,
  .trigger:focus-visible {
    transform: scale(1.0);
  }
  .hotline a,
  .hotline a:link,
  .shop-link a,
  .shop-link a:link,
  .shop-link.akt {
    width:100%;
    border-radius: 0;
    padding: 0.75rem 0.75rem;
    width: auto;
    height:auto;
    border-bottom: 1px solid var(--weiss);
  }
  .shop-link a,
  .shop-link a:link,
  .shop-link.a,
  .shop-link.a:link {
    border-bottom: 0;
  }
  .hotline a:hover,
  .hotline a:focus-visible,
  .shop-link a:hover,
  .shop-link a:focus-visible {
    background: var(--gelb-hell);
    transform: scale(1.0);
  }
  .hotline a::before,
  .hotline a:link::before,
  .shop-link a::before,
  .shop-link a:link::before,
  .shop-link.akt::before {
    top: 10px;
    left: 50%;
    margin-left: -75px;
    height: 30px;
    width: 30px;
  }
  .shop-link.akt {
    transform: scale(1) rotate(0deg);
    width: 100%;
  }
  .shop-link-klein {
      margin-top: -2px;
  }
  .hotline a:hover::before,
  .hotline a:focus-visible::before {
    animation: tel-ring 1.35s 0.2s ease-out infinite;
  }
  .hotline, .shop-link {
    margin-left: 0;
  }
  .akt > .trigger, 
  li.akt > .trigger {
    padding: 0.75rem;
    border-bottom: 1px solid var(--gruen);
    border-top: 0;
    border-left: 0;
    border-right: 0;
  }
  .akt > .trigger.blau, 
  li.akt > .trigger.blau {
    border-bottom: 1px solid var(--blau-mittel);
  }
  .trigger[data-has-sub="true"]::after {
      width: 0.75rem;
      height: 0.75rem;
  }
  .trigger[data-has-sub="true"]::after,
  input[type="checkbox"]:checked + label.trigger[data-has-sub="true"]::after {
    right: 20px;
  }
  /* .header > nav */
  .header nav {
    position: fixed !important;
    left: 0;
    right: 0;
    top: 62px;
    z-index: 1100 !important;
    max-height: 0; /* geschlossen */
    overflow: hidden; /* geschlossen */
    pointer-events: none; /* geschlossen */
    transition: max-height var(--anim, 0.25s) var(--easing, ease);
    padding: 0;
  }
  /* öffnen/schließen über Toggle */
  #mobile-nav-toggle:checked ~ nav {
    max-height: 100vh;
    overflow: auto !important;
    overflow-y: scroll;
    pointer-events: auto !important;
    margin-top: 0;
    background: #fff;
    box-shadow: rgba(0, 0, 0, 0.4) 0px 10px 8px;
  }

  /* Liste im Overlay: vertikal, kein Clipping */
  /* .header > nav .nav */
  .header nav .nav {
    flex-direction: column;
    align-items: center;
    max-width: 100%;
    margin: 0 !important;
    padding: 50px 0 0 0 !important;
    overflow: visible !important;
    gap: 0;
  }
  .topbar {
    top: 0;
    right: 0;
    padding: 0;
    justify-content: flex-start;
  }
  .topbar ul {
    display: flex;
    flex-flow: row wrap;
    align-items: center;
    justify-content: center;
  }
  .topbar ul li {
    display: block;
    border-left: 1px solid var(--border-farbe);
  }
  .topbar ul li:last-child {
    display: block;
    border-right: none;
  }
  .topbar ul li a,
  .topbar ul li a:link {
    font-size: 16px;
    color: #000;
    text-align: left;
    display: block;
    padding: 0.25rem;
  }
  .topbar ul li.akt a,
  .topbar ul li a:hover,
  .topbar ul li a:focus-visible {
    color: var(--blau);
  }
  .topbar ul li.akt a {
    font-weight: 700;
  }
  .warenkorb-cont {
    width: 45px;
    height: 45px;
    top: 0px;
    right: 20px;
  }
  .warenkorb a, .warenkorb a:link {
    display: block;
    width: 45px;
    height: 45px;
  }
  .warenkorb-cont p {
    padding-top: 12px;
  }
  /* Ebene 2: im Fluss expandieren (nicht absolut) */
  .submenu2-wrap {
    position: static !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transform: none !important;
    transition: max-height var(--anim, 0.25s) var(--easing, ease),
      opacity var(--anim, 0.25s) var(--easing, ease);
  }
  input.nav-toggle:checked ~ .submenu2-wrap {
    max-height: calc(100vh - 62px) !important;
    overflow-y: scroll;
    opacity: 1 !important;
  }
  .submenu2,
  .header .headerbar.klein .submenu2 {
    padding: 0.75rem 8vw 0.75rem 10vw;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0rem;
    border-radius: 0;
    margin-top: 0;
  }
  .u-head,
  .submenu2 li a, 
  .submenu2 li a:link {
    padding: 0.35rem 0.15rem 0.35rem 0.55rem;
  }
  .submenu3 {
    border-left: none;
    padding-left: 0.75em;
  }
  .submenu3 li a {
    padding: 0.25rem !important;
  }

  /* ~~~~~~~~~~~~~~ HEADER KLEIN ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  .header .headerbar.scrolled {
    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.3);
  }
  /* ~~~~~~~~~~~~~~~~~ Inhalt ~~~~~~~~~~~~~~~~~~~~ */
  main {
    margin-top: 0;
    border-top: 0;
  }
  .cont-inhalt {
    font-size: 96%;
  }
  .nav-breadcrumb {
   display: none;   
  }
  h1 {
    font-size: 1.7em;
  }
  h2 {
    font-size: 1.4em;
  }
  .einleitung,
  .cont-inhalt {
    margin: 1.5vh auto;
    width: 96%;
  }
  .cont-inhalt p a::after {
    width: 12px;
    height: 12px;
    margin-left: 1px;
  }
  .mega-bannerbild figure {
    height: 380px;
  }
  .bild.volle-breite {
    margin: 1rem auto 0.5rem auto;
  }
  .card.alsListe {
    width: 96%;
    padding: 1.5rem 0 0.75rem 0;
  }
  .card.team-alle .card-text {
    font-size: var(--step-0);
    padding: 0 1rem 0 2rem;
  }
  .card.team-alle::before {
    right: 5px;
    bottom: 5px;
    width: 80px;
    height: 80px;
  }
  .card.thema .button-link.komplett-verlinkt {
    margin: 1rem 0 0 0;
  }
  .cont-inhalt.volle-breite.blau::before, 
  .cont-inhalt.volle-breite.gruen::before {
    left: -3%;
    top: -2%;
    width: 250px;
    height: 250px;
  }
  .slider-bannerbild {
    padding: 1.5rem 0 0 0;
  } 
  .slider-01 {
    padding: 0 10px 1rem 10px;
  }
  .slider-bannerbild.slick-dotted.slick-slider {
    margin-bottom: 0;
  } 
  .slider-01 .slick-slide {
    transform: none;
    margin: 0 5px;
  }
  /* Wichtig: slick-track braucht negativen Rand, damit nichts abgeschnitten wird */
  .slider-01 .slick-list {
    margin: 0 -7px;
    padding: 0 !important;
  }
  .slider-01 .slick-prev,
  .slider-01 .slick-next {
    display: none !important;
  }
  footer {
    padding: 2rem 0 5rem 0;
  }
   footer .kontakt-daten {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75em;
    padding-bottom: 2rem;
  }
  .card.bannerbild .card-text h3 {
    font-size: 1.75rem;
    padding: 0.75rem 1.5rem 1.75rem 0.5rem;
  }
  .card.bannerbild .card-text h4 {
    bottom: 2.5rem;
    left: 7vw;
    width: 170px;
    height: 170px;
    padding: 0.5rem;
    font-size: 20px;
    line-height: 24px;
  }
  .card.team-alle .content {
    width: 50%;
    text-align: center;
    padding: 0.5rem 1rem;
  }
  .wrapper-button-link {
    margin: 1rem auto 0 auto;
  }
  .wrapper-cards {
    width: 80vw;
    margin: 2vh auto 0 auto;
  }
  .wrapper-cards.referenzen {
    width: 100%;
    padding: 0 1%;
    margin: 0;
  }
  .wrapper-cards .card.komplett-verlinkt, 
  .wrapper-cards .card,
  .wrapper-cards.referenzen .rahmen.drop-down {
    width: 48%;
    margin-bottom: 2vh;
  }
  .wrapper-cards.produkt .card.produkt,
  .wrapper-cards.rezept .card.rezept {
    width: 47%;
    margin-bottom: 3dvh;
  }
  .wrapper-cards .card.team-solo.komplett-verlinkt {
    width: 31.5%;
  }
  .wrapper-events {
    margin-bottom: 1rem;
  }
  .wrapper-logos-icons {
    gap: 20px;
  }
  .card.icon {
    width: 130px;
  } 
  .card.icon .card-text h3 {
    font-size: 1.1rem;
  }
  .mega-bannerbild .mega-text h2 {
    font-size: 1.6rem;
  }
  .mega-bannerbild .mega-text,
  .mega-bannerbild .mega-text.rechts {
    max-width: 300px;
    padding: 1rem;
    bottom: 2vh;
    right: 2vw;
  }
  .mega-bannerbild .mega-text.links {
    left: 2vw;
  }
  .form-feld .saison-speisen .speisen {
    flex: 0 1 70%;
  }
  .form-feld .saison-speisen .speisen .form-box.check {
    flex: 1 0 49%;
  }
  .form-feld .spalte-vier .form-box {
    flex-basis: calc(100% / 3);
  }
  .form-feld .spalte-vier .form-box.select {
    flex-basis: calc(100% / 1);
    max-width: 290px;
  }
  .toggle-suche-link {
    margin: 2dvh auto 0 auto;
  }
  .message {
      width: 94%;
      margin: 0 auto 0.5rem auto;
  }
  .alert-arrow,
  .alert-icon, 
  .alert-close {
      padding: 0.25rem 1.25rem;
  }
  .alert-arrow {
      padding: 0.45rem 1.35rem;
  }
  .alert-close {
      padding: 0.25rem 0.9rem;
  }
  .alert-icon::before, 
  .alert-close::before {
      font-size: 1.1rem
  }
  .message .warenkorb-link {
      padding-right: 0.8rem;
  }
  .alert-wrapper {
      padding: 0.5rem;
  }
  .login-box,
  .coupon-box {
      max-width: none;
      width: min(100%, 650px);
  }

}

/* ================= max-width: 900px ===================== */

@media screen and (max-width: 900px) {
  .fancybox-button--left,
  .fancybox-button--right {
    width: 74px;
  }
  .cont-inhalt.schmal {
    padding: 0 5%;
  }
  .cont-inhalt li {
    background: transparent url(../images/bullet.svg) 0 7px no-repeat;
    background-size: 10px;
    margin-bottom: 0.55rem;
  }
  .fancybox-placeholder::before {
    top: -15px;
    left: -15px;
    right: -15px;
    bottom: -15px;
  }
  .fancybox-placeholder {
    width: 96%;
    margin: 0 auto;
  }
  .wrapper-events .headline {
    padding: 1rem 0;
  }
  .wrapper-events .headline h2,
  .wrapper-events .headline h3 {
    text-align: center;
    font-size: var(--step-2);
    line-height: 1.2;
  }
  .card.event {
    padding: 0;
    margin: 0;
  }
  .event-info {
    padding: 10px;
  }
  .event-info .event-date .date,
  .event-info .event-typ h3 {
    font-size: 1.3rem;
  }
  .event-info .event-date,
  .event-info .event-typ,
  .event-info .event-designation,
  .event-info .event-facts {
    width: 100%;
  }
  .event-info .event-typ,
  .event-info .event-facts {
    padding-left: 0;
  }
  .event-info .event-date,
  .event-info .event-designation {
    text-align: left;
  }
  .event-info .event-date .typ,
  .event-info .event-typ p,
  .event-info .event-facts,
  .event-info .event-designation {
    font-size: var(--step-0);
  }
  .card.thema .card-text {
    padding: 1rem 0;
  }
  .card.team-alle .card-text {
    padding: 2rem 1rem 2rem 2rem;
  }
  .button-link.komplett-verlinkt {
    font-size: 1.05rem;
  }
  .wrapper-events {
    padding: 0 10px 10px 10px;
  }
  .wrapper-events.detail {
    padding: 35px 10px 10px 10px;
  }
  .wrapper-events::before,
  .wrapper-events::after {
    left: 10%;
    top: -20px;
    width: 13px;
    height: 50px;
    border-radius: 7px;
  }
  .wrapper-events::after {
    left: auto;
    right: 10%;
  }
}

/* ================= max-width: 815px ===================== */
@media (max-width: 815px) {

  .table-wrap,
  .shopping-cart-feld {
    width:94%;
    padding: 0.5rem;
  }
  .shopping-cart-feld.userdaten {
    padding: 0 0.5rem;
  }
  
}

/* ================= max-width: 780px ===================== */
@media (max-width: 780px) {
  .header nav {
    top: 48px;
  }
  .submenu2,
  .header .headerbar.klein .submenu2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .card.bannerbild .card-text h3 {
    font-size: 1.5rem;
    padding: 0.5rem 1.25rem 1.5rem 0.5rem;
  }
  .slider-nav-wrap {
    display: none;
  }
  .wrapper-produkte-filter {
    flex-direction: column;
    gap: 0;
    flex-flow: row wrap;
  }
  .wrapper-filter {
    display: flex;
    justify-content: space-between;
    flex-flow: row wrap;
    gap: 1rem;
    width: 98%;
    margin: 0 auto;
    padding: 0;
  }
  .card.filter {
    flex: 1 1 45%;
  }
  .card.logo,
  .card.icon {
    width:31%;
  }
  .box-kontakt {
    padding: 1.5rem 1rem;
    margin: 1.5rem auto 2em auto;
  }
  .form-feld.auswahl-filter-formular {
    padding: 0.5rem;
  }
  .rahmen.faq {
    margin: 1rem auto 0rem auto;
  }
  .rahmen.faq .toggle + label {
    padding: 0.75rem 2.5rem 0.75rem 1.25rem;
  }
  .toggle:checked ~ .details.faq {
    padding: 0.5rem 1rem;
  }
}

/* ================= max-width: 700px ===================== */
@media (max-width: 700px) {
  .header {
    height: 60px;
  }
  .topbar {
    top: 50px;
    justify-content: center;
  }
  .header nav .nav {
    padding: 95px 0 0 0 !important;
  }
  #search-field {
    right: 99%;
    top: 15px;
    margin-right: -200px; 
  }
  .warenkorb-cont {
    top: 7px;
  }
  .brand {
    width: 161px;
    height: 50px;
  }
  /* ~~~~~~~~~~~~~~ HEADER KLEIN ~~~~~~~~~~~~~~~~~~~~~~~~~ */
   .header .headerbar.klein .nav {
    padding: 155px 0 0 0 !important;
  }
  .header .headerbar.klein .topbar {
    top: 110px;
  }
  .header .headerbar.klein .brand {
    transform: scale(0.7);
  }
  /* ~~~~~~~~~~~~~~ HEADER KLEIN ~~~~~~~~~~~~~~~~~~~~~~~~~ */
  .card.bannerbild .card-text h4 {
    bottom: 2.5rem;
    left: 5vw;
  }
  .card.team-alle {
    width: 100%;
    flex-flow: row wrap;
    margin: 3vh 0;
  }
  .card.team-alle figure {
    width: 100%;
  }
  .card.team-alle .card-text {
    width: 100%;
    text-align: center;
    padding: 2rem;
  }
  .card.thema.bild-links,
  .card.thema.bild-rechts ,
  .card.team-solo-detail {
    width: 80%;
    margin: 2vh auto;
  }
  .card.team-solo-detail {
    margin: 0 auto 2vh auto;
  }
  .card.thema.bild-links figure,
  .card.thema.bild-rechts figure,
  .card.team-solo-detail figure {
    width: 100%;
    aspect-ratio: 1.333333/1;
  }
  .card.thema.bild-links .card-text,
  .card.thema.bild-rechts .card-text {
    width: 100%;
    padding-top: 1rem;
    align-self: flex-start;
  }
  .card.thema .card-text h3 {
    margin: 0 0 0.35rem 0;
  }
  .wrapper-button-link {
    margin: 0 auto;
  }
  .card.thema .button-link.komplett-verlinkt {
    width: 100%;
    margin: 0;
    transform-origin: center center;
  }
  .card.thema .button-link.komplett-verlinkt:hover {
    width: 100%;
    margin: 1rem 0 0 0;
    transform-origin: center center;
    transform: scale(1);
  }
  .card.thema.bild-rechts .figure {
    order: 1;
  }
  .card.thema.bild-rechts .card-text {
    order: 2;
  }
  .cont-inhalt.volle-breite,
  .cont-inhalt.volle-breite.produkt,
  .cont-inhalt.volle-breite.rezept {
    margin: 2dvh 0;
    padding: 2vh 2dvw;
  }
  .cont-inhalt.volle-breite.blau::before, 
  .cont-inhalt.volle-breite.gruen::before {
    left: -2%;
    top: -1%;
    bottom: auto;
    right: auto;
    width: 200px;
    height: 200px;
  }
  .wrapper-cards {
    width: 94%;
    margin: 2vh auto 0 auto;
  }
  .cont-inhalt {
    max-width: 90%;
  }
  .wrapper-cards .card.team-solo.komplett-verlinkt {
    width: 48.5%;
  }
  .wrapper-cards.referenzen  {
    width: 80%;
    margin: 0 auto;
  }
  .rahmen.drop-down .toggle + label {
    padding: 0.75rem 2rem 0.75rem 1.0rem;
  }
  .wrapper-cards.referenzen .rahmen.drop-down {
    width: 100%;
    margin-bottom: 0.75vh;
  }
  .form-feld .spalte-vier .form-box {
    flex-basis: calc(100% / 2);
  }
  .auswahl-suche-ergebnis-rahmen {
    padding: 0 0.5rem;
  }
  .auswahl-suche-ergebnis {
    padding: 0.25rem 0rem;
  }
  .auswahl-suche-ergebnis .anbieter,
  .auswahl-suche-ergebnis .bewertung {
    flex: 0 0 100%;
    gap: 0;
    padding: 0.25rem 0rem;
  }
  .auswahl-suche-ergebnis .bewertung {
    border-left: 0;
    border-top: 1px dotted var(--blau-dunkel-mittel);
    padding-left: 0;
  }
  .form-box-container {
    flex-direction: column;
    margin: 0 0 0.5rem 0;
  }
  .form-box input[type="text"].schmal, 
  .form-box input[type="email"].schmal, 
  .form-box-container select.schmal {
    max-width: 100%;
    width: 100%;
    margin: 0;
  }
  .form-box .label {
    flex: 1 1 100%;
    padding-right: 0;
    text-align: left;
    width: 100%;
  }
  .form-box input[type="text"], 
  .form-box input[type="email"] {
    flex: 1 1 100%;
    width: 100%;
  }
  .form-box.kontakt {
    padding: 1rem 0.5rem 0.5em 0.5rem;
  }
  .form-box.check.agb {
    margin-left: 0;
  }
  .rechnungsadresse legend {
    padding: 1rem 0 1rem 0;
  }
}

/* ================= max-width: 640px ===================== */
@media (max-width: 640px) {
  h1 {
    font-size: 1.5em;
  }
  .mega-bannerbild figure {
    height: 300px;
  }
  .card.contact .wrapper-button-link {
    margin: 0 auto 10px auto;
  }
  .card.contact .button-link.komplett-verlinkt {
    padding: 0.75rem 0.3rem;
  }
  .card.contact,
  .card.contact.gelb,
  .card.contact.gruen,
  .card.contact.blau {
    padding: 0.75rem 0.5rem;
  }
  .card.contact h2 {
    text-align: center;
  }
  .card.contact .bild-text {
    flex-flow: column;
    align-items: flex-start;
    align-items: center;
    gap: 0.75rem;
  }
  .card.contact h2, 
  .card.contact h3,
  .card.contact .bild-text p,
  .card.contact .bild-text p.funktion {
    text-align: center;
    margin-bottom: 5px;
  }
}

/* ================= max-width: 535px ===================== */
@media (max-width: 535px) {

  .card.alsListe {
    flex-flow: column;
    gap: 0.5rem;
    margin-bottom: 3dvh;
    border-bottom: 0;
    padding: 0;
  }
  .card.alsListe .card-text,
  .card.alsListe figure {
    width: 100%;
  }
  .card.alsListe .card-text {
    padding: 0 0 0 0.75rem;
  }
  .card.alsListe.logos-bewertung {
    border-bottom: 1px solid var(--blau-mittel);
    padding-bottom: 1rem;
  }
  .card.alsListe.logos-bewertung .card-text {
    padding: 0;
  }
  .card.alsListe.logos-bewertung figure {
    width: 70%;
  }
  .wrapper-logos-icons {
    gap: 5%;
  }
  .card.logo,
  .card.icon {
    width:47%;
  }
  .card.logo {
    margin-bottom: 10px;
  }
  .rahmen.auswahl-formular .form-feld.auswahl-filter-formular {
    flex-flow: row wrap;
  }
  .auswahl-filter-formular > .card.filter {
    width: 90%;
  }
  .cont-inhalt.volle-breite,
  .cont-inhalt.volle-breite.produkt,
  .cont-inhalt.volle-breite.rezept {
    padding: 4vh 15%;
    margin: 2vh 0;
  }
  .wrapper-cards .card.komplett-verlinkt, 
  .wrapper-cards .card,
  .wrapper-cards.produkt .card.produkt,
  .wrapper-cards.rezept .card.rezept {
    width: 100%;
  }
  .shopping-cart,
  .shopping-cart thead,
  .shopping-cart tbody,
  .shopping-cart tr,
  .shopping-cart th,
  .shopping-cart td {
      display: block;
      width: 100%;
  }
  .shopping-cart thead {
      position: absolute;
      width: 1px;
      height: 1px;
      margin: -1px;
      padding: 0;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      border: 0;
  }
  .shopping-cart tbody tr {
      padding: 0.5rem 0;
      text-align: right;
  }
  .shopping-cart tbody td {
      display: grid;
      grid-template-columns: 8rem 1fr;
      gap: 0.5rem;
      padding: 0.5rem;
      border: 0;
      border-bottom: 1px solid #ededed;
      text-align: right;
  }
  .shopping-cart tbody td:last-child {
      border-bottom: 2px solid var(--line);
  }
  .shopping-cart tbody td::before {
      content: attr(data-label);
      font-weight: 600;
      text-align: left;
  }
  .shopping-cart td:first-child {
      text-align: right;
  }
  .qty {
      justify-self: end;
  }
  .shopping-cart tbody tr:nth-child(odd) {
    background-color: var(--gelb-hell-heller);
  }
  .shopping-cart tbody tr:nth-child(even) {
    background-color: var(--gelb-hell-am-hellsten);
  }
  .shopping-cart tfoot td.total-price-wort {
    font-weight: 300;
    font-size: var(--step--1);
  }
  .shopping-cart tfoot td.total-price-wort {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    border-bottom: 0;
  }
  .shopping-cart tfoot td.total-price {
    display: block;
    width: 100%;
    max-width: none;
    min-width: 0;
    text-align: right;
    white-space: nowrap; /* € + Zahl einzeilig */
    padding: 0 0 0 105px; /* bündig wie Inhalt nach Label-Spalte */
    font-weight: 600;
  }
  .submit.finish, .submit.update {
    max-width: 100%;
    margin: 0;
  }
}

/* ================= max-width: 500px ===================== */
@media (max-width: 500px) {

  .header nav .nav {
    padding: 105px 0 0 0 !important;
  }
  .submenu2,
  .header .headerbar.klein .submenu2 {
    grid-template-columns: 1fr;
  }
  .submenu2 li.akt {
    padding: 0.2rem 0.2rem 0.1rem 0.4rem;
  }
  .u-head, 
  .submenu2 li a, 
  .submenu2 li a:link,
  .header .headerbar.klein .submenu2 li a {
    padding: 0.2rem 0.4rem;
  }
  .submenu3 li a,
  .header .headerbar.klein .submenu3 li a {
    padding: 0.2rem 0.4rem !important;
  }
  input.nav-toggle:checked ~ .submenu2-wrap {
    opacity: 1;
    max-height: 1000px;
  } 
  footer .contact p,
  footer .contact li {
    font-size: 1.2rem;
  }
  .card.bannerbild .card-text h4 {
    bottom: 2.5rem;
    left: 3vw;
    width: 120px;
    height: 120px;
    font-size: 17px;
    line-height: 18px;
    padding: 0.15rem;
  }
  .card.bannerbild .card-text h3 {
    font-size: 1.2rem;
    padding: 0.25rem 0.75rem 1.25rem 0;;
  }
  .card.team-alle .weiter-link {
    margin: 0 0 20px 0;
    padding: 0;
  }
  .card.team-alle::before {
    width: 70px;
    height: 70px;
  }
  .event-info .card-text h3,
  .event-info .datum-lernart .datum {
    font-size: 1.4rem;
  }
  .card.thema.bild-links,
  .card.thema.bild-rechts,
  .card.team-solo-detail {
    width: 100%;
  }
  .card.team-solo-detail {
    margin: 0 auto 2vh auto;
  }
  .mega-bannerbild .mega-text h2 {
    font-size: 1.2rem;
  }
  .mega-bannerbild .mega-text,
  .mega-bannerbild .mega-text.rechts {
    max-width: 230px;
    padding: 1rem;
    bottom: 1vh;
  }
  .card.sponsor-logo,
  .card.zertifikat-logo {
    width: 100px;
  }
  .auswahl-suche-feld {
    padding: 0.25rem 0 0.5rem 0;
  }
  .form-feld h2, .form-feld h3 {
    margin-bottom: 0.5dvh;
  }
  .form-box.select {
    margin: 0 auto;
  }
  .form-feld .saison-speisen .saison,
  .form-feld .saison-speisen .speisen {
    flex: 0 1 100%;
  }
  .form-feld .saison-speisen .saison {
    flex-flow: row wrap;
    justify-content: space-between;
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--blau-dunkel-mittel);
    border-right: 0;
  }
  .form-box input[type="checkbox"] + label,
  .form-box input[type="radio"] + label {
    line-height: 120%;
    padding: 0.25dvh 0 0.25dvh 30px;
  }
  .auswahl-suche-ergebnis .bewertung .bewertung-logo {
    width: 25%;
    height: auto;
    padding: 3px;
  }
  .form-feld .min-breite .texteingabe,
  .form-box select {
    width: 100%;
    max-width: 290px;
  }
}

/* ================= max-width: 450px ===================== */
@media (max-width: 450px) {
  .cont-inhalt.volle-breite,
  .cont-inhalt.volle-breite.produkt,
  .cont-inhalt.volle-breite.rezept {
    padding: 2vh 5%;
  } 
  .wrapper-cards.referenzen  {
    width: 94%;
  }
}

/* ================= max-width: 400px ===================== */
@media (max-width: 400px) {
  #search-field {
    right: 99%;
    margin-right: -200px;
  }
  .header .headerbar.klein .nav {
    padding: 180px 0 0 0 !important;
  }
  .intro {
    margin: 0 auto;
  }
  .card.thema .button-link.komplett-verlinkt {
    width: 100%
  }
  .wrapper-cards .card.team-solo.komplett-verlinkt {
    width: 100%;
    margin: 1vh auto 0 auto;
  } 
  .card.team-solo figure img {
    object-fit: cover;
    aspect-ratio: 1.333/1;
  }
  .mega-bannerbild figure {
    height: 250px;
  }
}

/* ================= max-width: 360px ===================== */
@media (max-width: 360px) {
  .slider-01 .slick-dots li {
    margin: 0 5px;
  }
  .topbar {
    top: 63px;
  }
  .topbar ul li a, 
  .topbar ul li a:link {
    padding: 0.35rem;
  }
  .header nav .nav {
    padding: 125px 0 0 0 !important;
  }
}

@media print {
  .logo-druck {
    display: block;
  } 
  body {
	font-family: Arial, Open Sans, Helvetica, sans-serif;
	font-size: 12pt;
	line-height: 1.5;
	color: #000;
	background: none; 
  }
  /* a[href]::after {
    content: " <"attr(href)">";
    color: #999999;
    background-color: transparent;
    font-style: italic;
    font-size: 80%;
  } */
  nav, 
  footer, 
  .no-print,
  .toggle-suche-link,
  header {
    display: none;
  }
  /* @page { 
		margin: 2cm;
	} */
  /* img {
    max-width: 10cm; 
  } */
  h1, h2, h3, h4 {
    break-after: avoid;
    margin-bottom: 15px;
    padding-bottom: 15px;
  }
  h1 {
    font-size: 20pt;
  }
  h2 {
    font-size: 16pt;
  }
  h4 {
    font-size: 14pt;
  }
  table, 
  figure,
  .card,
  .firma,
  .produkt {
    break-inside: avoid;
  }

}