/* ==========================================================================
   nutwork.de – Stylesheet (aufgeräumt 02.10.2026)
   Aufbau:
     1  Basis / Normalize / Raster        (ehem. abovethefold.css + main.css)
     2  Header, Navigation, Hero
     3  Bestandskomponenten                (Slider, Popups, Formular, Footer …)
     4  Redesign 2026                      (Schriften, Farben, Komponenten)
     5  Korrekturrunden 28.09. – 02.10.
   Doppelte Regeln aus abovethefold.css / main.css sind zusammengeführt,
   überschriebene Werte und auskommentierter Altcode entfernt.
   ========================================================================== */


/* ==========================================================================
   1  BASIS
   ========================================================================== */

/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css (gekürzt) */
html {
  font-family: sans-serif;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
html, body { margin: 0; padding: 0; }
* { box-sizing: border-box; }

article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; }
audio, canvas, progress, video { display: inline-block; }
audio:not([controls]) { display: none; height: 0; }
progress { vertical-align: baseline; }
template, [hidden] { display: none; }

a { background-color: transparent; }
a:active, a:hover { outline-width: 0; }
abbr[title] { border-bottom: none; text-decoration: underline dotted; }
b, strong { font-weight: bolder; }
dfn { font-style: italic; }
mark { background-color: #ff0; color: #000; }
small { font-size: 80%; }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }
sub { bottom: -0.25em; }
sup { top: -0.5em; }
img { border-style: none; vertical-align: middle; }
svg:not(:root) { overflow: hidden; }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }
figure { margin: 0; }

hr {
  box-sizing: content-box;
  overflow: visible;
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #b3a8a0;
  margin: 50px 0;
  padding: 0;
}

button, input, select, textarea { font: inherit; margin: 0; }
optgroup { font-weight: bold; }
button, input { overflow: visible; }
button, select { text-transform: none; }
button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }
button::-moz-focus-inner, [type="button"]::-moz-focus-inner, [type="reset"]::-moz-focus-inner, [type="submit"]::-moz-focus-inner { border-style: none; padding: 0; }
button:-moz-focusring, [type="button"]:-moz-focusring, [type="reset"]:-moz-focusring, [type="submit"]:-moz-focusring { outline: 1px dotted ButtonText; }
fieldset { border: 0; margin: 0; padding: 0; }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }
textarea { overflow: auto; resize: vertical; }
[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }
[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }
[type="search"] { -webkit-appearance: textfield; outline-offset: -2px; }
[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }
::-webkit-input-placeholder { color: inherit; opacity: 0.54; }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; }

body.noscroll { overflow: hidden; }
::selection { background: #000; text-shadow: none; color: #fff; }

a {
  color: #3f312b;
  text-decoration: underline;
  transition: color 0.2s ease-in-out;
}
a:hover { color: #7c6054; }

.browsehappy { margin: 0; padding: 0.4em 0; background: #ba2a0a; font-size: 13px; color: #fff; text-align: center; }
.browsehappy a { color: #fff !important; }

/* --- Icon-Font (icomoon) -------------------------------------------------- */
@font-face {
  font-family: 'icomoon';
  src: url("../fonts/icons2/icomoon.eot?u8yhmh");
  src: url("../fonts/icons2/icomoon.eot?u8yhmh#iefix") format("embedded-opentype"),
       url("../fonts/icons2/icomoon.ttf?u8yhmh") format("truetype"),
       url("../fonts/icons2/icomoon.woff?u8yhmh") format("woff"),
       url("../fonts/icons2/icomoon.svg?u8yhmh#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"], [class*=" icon-"], .icon,
header ul.lang li.lang__de.active a:after, header ul.lang li.lang__en.active a:after,
.scrollMe:after, .slick-prev:before, .slick-next:before {
  font-family: 'icomoon' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.icon-healthy:before      { content: "\e908"; }
.icon-emotion:before      { content: "\e904"; }
.icon-zeit:before         { content: "\e905"; }
.icon-vertrauen:before    { content: "\e906"; }
.icon-heart:before        { content: "\e907"; }
.icon-arrow-bottom:before { content: "\e900"; }
.icon-arrow-left:before   { content: "\e901"; }
.icon-arrow-right:before  { content: "\e902"; }
.icon-arrow-up:before     { content: "\e903"; }
.icon-phone:before        { content: "\f095"; }
.icon-envelope:before     { content: "\f0e0"; }

/* --- Layout-Grundgerüst ---------------------------------------------------- */
.pageWrapper { max-width: 2000px; margin: 0 auto; }
.inner { width: 100%; max-width: 980px; margin: 0 auto; padding: 0 10px; }
footer .inner { max-width: 1200px; }

.table__container { display: table; width: 100%; height: 100%; }
.table__container img { max-width: 100%; height: auto; max-height: 100%; }
.table__container > div { display: table-cell; vertical-align: middle; height: 100%; }
.table__container.basic__spacing > div { padding: 20px; }
.table__container.align__top > div { vertical-align: top; }
.table__container.align__bottom > div { vertical-align: bottom; }
.table__container > .w50.image_mb img { margin-bottom: 15px; }

.block__container { font-size: 0; }
.block__container > div { font-size: 18px; display: inline-block; vertical-align: top; }

.basic__section .basic__slider { margin-bottom: 30px; padding-bottom: 30px; }
.basic__section .basic__slider .slick-dots li,
.basic__section .basic__slider .slick-dots li button { width: 14px; height: 14px; background-color: transparent; }
.basic__section .basic__slider .slick-dots li.slick-active button { background-color: #02468d; }
.basic__section__slim { padding: 50px 0 100px; }
.basic__section__slim.no__padding { padding: 0; }

.w20 { width: 20%; }
.w25 { width: 25%; }
.w33 { width: 33.333333%; }
.w50 { width: 50%; }
.w50.halfLeft { margin-left: 25%; }
.w66 { width: 66.666666%; }
.w75 { width: 75%; }
.w80 { width: 80%; }

.blanklist, .images-inline, ul.regions__slider__nav, nav.basenav .nav__wrapper > ul { list-style: none; margin: 0; padding: 0; }
.images-inline { font-size: 0; margin-bottom: 20px !important; }
.images-inline li { font-size: 18px; display: inline-block; padding: 0 5px; }
.images-inline li:first-child { padding-left: 0; }
.images-inline li:last-child { padding-right: 0; }
.images-inline li img { max-width: 100%; width: 100%; height: auto; }

.IFS_logo { height: 105px; }
.IFS_logo img { height: 100%; }

.FDC:before {
  content: "";
  display: inline-block;
  position: relative;
  height: 40px;
  min-width: 111px;
  background: url("../bilder/certificates/logos/FDC_Logo.png") no-repeat bottom left;
  background-size: 100% auto;
  margin-right: 10px;
}

.badge { position: absolute; left: calc(100% + 30px); top: 0; }

/* Google-Map (statisch) */
.mapimagewrap { position: relative; }
.basic__section.imprint .inner { max-width: 1200px; margin: 0 auto; }
.imprint .mapimagewrap .mapimagewrapinner { width: 100%; height: 100%; }
.mapimagewrapinner { width: 100%; height: 400px; }
img.mapimage, img.mapimagetwo { width: 100%; height: 100%; }
.googlelink { margin-top: -20px; position: absolute; display: block; width: 150px; }
.linkimg { width: 150px; height: 10px; }

/* --- Hilfsklassen ---------------------------------------------------------- */
.align__left { text-align: left; }
.align__center { text-align: center; }
.align__right { text-align: right; }
.color__white { color: #fff; }   /* Überschriften: siehe Redesign */
.blue { color: #02468d; }
.mt0 { margin-top: 0; }
.mb0 { margin-bottom: 0; }
.pt0 { padding-top: 0; }
.pb0 { padding-bottom: 0; }
.pb25 { padding-bottom: 25px; }
.pb40 { padding-bottom: 40px; }
.bg__brown { background-color: #3f312b; color: #fff; }
.bg__brightbrown { background-color: #9c8e84; }
.text__shadow { text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5); }
span.grey { display: block; background-color: #f5f5f5; padding: 10px; }

.button-blue { background-color: #02468d; color: #fff; padding: 10px 15px !important; text-decoration: none; }
.button-blue:hover { background-color: #035fbf; }

/* --- Bild-Kacheln mit Overlay (a.big__hover) ------------------------------ */
a.big__hover { text-decoration: none; display: block; color: #fff; position: relative; overflow: hidden; }
a.big__hover img { width: 100%; height: auto; }
a.big__hover .hover__content {
  opacity: 0;
  visibility: hidden;
  background-color: rgba(63, 49, 43, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(0.8);
  transition: all 0.3s ease-in-out;
}
a.big__hover .hover__content:after,
a.big__hover .hover__content:before {
  opacity: 0;
  visibility: hidden;
  content: '';
  position: absolute;
  transition: all 0.3s ease-in-out;
}
a.big__hover .hover__content:after { border: 3px solid #fff; top: 20px; left: 20px; right: 20px; bottom: 20px; }
a.big__hover .hover__content:before { border: 1px solid #fff; top: 30px; left: 30px; right: 30px; bottom: 30px; }
a.big__hover:hover .hover__content,
a.big__hover.alw_visible .hover__content { opacity: 1; visibility: visible; transform: scale(1); }
a.big__hover:hover .hover__content:after, a.big__hover:hover .hover__content:before,
a.big__hover.alw_visible .hover__content:after, a.big__hover.alw_visible .hover__content:before { opacity: 1; visibility: visible; }
a.big__hover.alw_visible .alw_wrapper { display: block; max-width: 1200px; width: 100%; margin: 0 auto; padding: 0 10px; }
a.big__hover.alw_visible:hover { cursor: default; }
.produktsicherheit a.big__hover.alw_visible .hover__content p.specialFont { color: #fff; }

/* --- Parallax-Bilder ------------------------------------------------------- */
.parallax__image__right, .parallax__image__left {
  background-attachment: fixed;
  background-size: 45% auto;
  background-repeat: no-repeat;
  position: relative;
}
.parallax__image__right.bg-not-fixed, .parallax__image__left.bg-not-fixed { background-attachment: scroll; }
.parallax__image__right { background-position: right bottom; }
.parallax__image__left { background-position: left bottom; }

/* --- Karriere / Facts (Bestand) -------------------------------------------- */
.career-more:hover a img { transform: scale(110%); }
.career .table__container.align__top .w20 { vertical-align: middle; text-align: center; }
.engagement.facts { max-width: 980px; margin: 0 auto; }
.facts .table__container.align__top .w20 { vertical-align: top; text-align: center; padding: 15px; }
.facts .table__container.align__top .w20 p { font-size: 20px; }

/* --- Einblende-Animation .table__container.animate ------------------------- */
.no-js .table__container.animate div:first-child,
.no-js .table__container.animate div:last-child {
  position: static !important;
  opacity: 1 !important;
  visibility: visible !important;
  backface-visibility: visible !important;
}
.table__container.animate > div { position: relative; }
.table__container.animate > div:first-child { left: -200px; }
.table__container.animate > div:last-child { right: -200px; }
.table__container.animate div:first-child,
.table__container.animate div:last-child {
  opacity: 0;
  visibility: hidden;
  backface-visibility: hidden;
  transition: all .4s ease-in-out;
}
.table__container.animate.showme div:first-child,
.table__container.animate.showme div:last-child { opacity: 1; visibility: visible; backface-visibility: visible; }
.table__container.animate.showme div:first-child { left: 0; }
.table__container.animate.showme div:last-child { right: 0; }

/* --- Responsive Basis ------------------------------------------------------ */
@media screen and (max-width: 1400px) {
  a.big__hover .hover__content:before,
  a.big__hover .hover__content:after { display: none; }
  a.big__hover .hover__content { top: auto; bottom: 0; transform: scale(1); height: auto; }
  a.big__hover .hover__content .table__container > div { padding: 20px; }
  .big__hover.alw_visible { max-height: none !important; }
  .big__hover.alw_visible span { display: none; }
  .big__hover.alw_visible .alw_wrapper { padding: 0 10px !important; }
  .big__hover.alw_visible .hover__content { position: static; background: #3f312b; }
}

@media screen and (max-width: 1243px) {
  .career .table__container.align__top .w20 { text-align: left; }
  .facts .table__container.align__top .w20 { text-align: center; }
}

@media screen and (max-width: 1230px) {
  section .table__container, section.table__container { font-size: 0; }
  section .table__container > div, section.table__container > div {
    font-size: 18px;
    display: inline-block;
    vertical-align: top;
    height: auto;
  }
  .w20 { width: 50%; }
  .map .column { flex-direction: column; }
  .map .column .columnclaim { width: 100% !important; }

  a.big__hover .hover__content,
  a.big__hover .hover__content:before,
  a.big__hover .hover__content:after { opacity: 1; visibility: visible; }

  .career .table__container.align__top .w20,
  .career .table__container.align__top .w80 { text-align: center; width: 100%; }

  /* Diese Regeln standen bisher (durch eine fehlende Klammer in main.css)
     nur unterhalb von 1230px – Verhalten bewusst unverändert übernommen. */
  .flex-container { display: flex; margin-left: -15px; margin-right: -15px; }
  .flex-container.noGutter .column { margin-left: 0; margin-right: 0; flex-wrap: wrap; }
  .column { padding: 15px; }
  .column.col-size-1  { width: 8.33333333%; }
  .column.col-size-2  { width: 16.66666667%; }
  .column.col-size-3  { width: 25%; }
  .column.col-size-4  { width: 33.33333333%; }
  .column.col-size-5  { width: 41.66666667%; }
  .column.col-size-6  { width: 50%; }
  .column.col-size-7  { width: 58.33333333%; }
  .column.col-size-8  { width: 66.66666667%; }
  .column.col-size-9  { width: 75%; }
  .column.col-size-10 { width: 83.33333333%; }
  .column.col-size-11 { width: 91.66666667%; }
  .column.col-size-12 { width: 100%; }
}

@media screen and (max-width: 1200px) {
  .table__container.animate div:first-child,
  .table__container.animate div:last-child {
    opacity: 1 !important;
    visibility: visible !important;
    backface-visibility: visible !important;
    left: 0;
    right: 0;
  }
  .mapimagewrapinner { height: 100%; }
}

@media screen and (max-width: 865px) {
  .w25 { width: 50%; }
}

@media screen and (max-width: 760px) {
  .w33, .w66 { width: 100%; margin-bottom: 20px; }
}

@media screen and (max-width: 720px) {
  .w50 { width: 100%; margin-bottom: 20px; }
  .fieldrow.w50 { margin-bottom: 0; }
  section > .inner { padding-left: 20px; padding-right: 20px; }
  .table__container.basic__spacing > div { padding: 0; }
  .table__container.animate.offer { display: block !important; margin-top: 65% !important; }
  .table__container.animate.reverse { display: flex; flex-wrap: wrap-reverse; }
  .career .bg-not-fixed { background-position: top !important; background-size: 100% !important; }
}

@media screen and (max-width: 440px) {
  .w20, .w25 { width: 100%; margin-bottom: 20px; }
}


/* ==========================================================================
   2  HEADER, NAVIGATION, HERO
   ========================================================================== */

header { padding: 10px 0 30px; transition: all 0.2s ease-in-out; }
header .inner { display: table; width: 100%; max-width: 1200px; position: relative; }
header .logo { width: 150px; height: 81px; display: table-cell; vertical-align: bottom; }
header .logo a {
  display: block;
  width: 150px;
  height: 81px;
  background-image: url("../bilder/logo.png");
  background-size: 150px 81px;
}
@media (min-resolution: 1.3dppx), (-webkit-min-device-pixel-ratio: 1.3) {
  header .logo a { background-image: url("../bilder/logo_2x.png"); }
}
header .logo span { display: none; }

header .header__contact {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 16px;
  display: flex;
  align-items: center;
}
header .header__contact a { text-decoration: none; margin-left: 20px; }
header .header__contact span { padding-right: 10px; }

header.fixed {
  position: fixed;
  top: 0;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 9997;
  width: 100%;
  max-width: 2000px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
}
header.fixed:hover { background-color: #fff; }

/* --- Sprachumschalter (aktiv seit Livegang DE/EN) -------------------------- */
header ul.lang { height: 16px; overflow: hidden; list-style: none; margin: 0; padding: 0; }
header ul.lang li { display: block !important; }
header ul.lang li.lang__de, header ul.lang li.lang__en { opacity: 0; visibility: hidden; transition: all 0.2s ease-in-out; }
header ul.lang li.lang__de a, header ul.lang li.lang__en a { display: block; background-size: 16px 16px; width: 16px; height: 16px; background-repeat: no-repeat; }
header ul.lang li.lang__de span, header ul.lang li.lang__en span { display: none; }
header ul.lang li.lang__de.active, header ul.lang li.lang__en.active { opacity: 1; visibility: visible; position: relative; padding-right: 20px; }
header ul.lang li.lang__de.active a:after, header ul.lang li.lang__en.active a:after {
  position: absolute;
  top: 0;
  right: 0;
  content: "\e900";   /* Pfeil nach unten (icomoon) */
  color: #3f312b;
  font-size: 13px;
}
header ul.lang li.lang__de a { background-image: url("../img/flag_de.png"); }
header ul.lang li.lang__en a { background-image: url("../img/flag_en.png"); }
@media (min-resolution: 1.3dppx), (-webkit-min-device-pixel-ratio: 1.3) {
  header ul.lang li.lang__de a { background-image: url("../img/flag_de_2x.png"); }
  header ul.lang li.lang__en a { background-image: url("../img/flag_en_2x.png"); }
}
header ul.lang:hover { overflow: visible; }
header ul.lang:hover li { opacity: 1; visibility: visible; }

@media screen and (max-width: 760px) {
  header ul.lang li.active { display: none !important; }
  header ul.lang li.lang__de, header ul.lang li.lang__en { opacity: 1; visibility: visible; }
}

@media screen and (max-width: 570px) {
  header { padding-top: 55px; padding-bottom: 15px; }
  header .header__contact {
    top: -55px;
    right: auto;
    left: 0;
    width: 100%;
    background-color: #fff;
    font-size: 0;
  }
  header .header__contact a {
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    padding: 5px;
    font-size: 14px;
    text-align: center;
  }
  header .logo { width: 111px; height: 60px; }
  header .logo a {
    background-image: url("../bilder/logo_small.png");
    width: 111px;
    height: 60px;
    background-size: 111px 60px;
  }
  header ul.lang { height: auto; padding: initial; margin-right: 10px; }
  header ul.lang li.lang__de a, header ul.lang li.lang__en a {
    width: 100%;
    height: auto;
    background-position: right center;
    border: 1px solid #4e3d35;
    background-color: rgba(57, 44, 39, 0.9);
    padding: 10px;
    text-align: center;
    background-image: none;
  }
  header ul.lang li.lang__de span, header ul.lang li.lang__en span {
    display: inline-block;
    vertical-align: middle;
    color: #fff;
    font-size: 16px;
  }
}
@media screen and (max-width: 570px) and (min-resolution: 1.3dppx),
       screen and (max-width: 570px) and (-webkit-min-device-pixel-ratio: 1.3) {
  header .logo a { background-image: url("../bilder/logo_small_2x.png"); }
}
@media screen and (max-width: 450px) {
  header ul.lang li.lang__de span, header ul.lang li.lang__en span { font-size: 12px; }
}
@media screen and (max-width: 360px) {
  header ul.lang li.lang__de span, header ul.lang li.lang__en span { font-size: 9px; }
}

/* --- Navigation ------------------------------------------------------------ */
nav.basenav { display: table-cell; vertical-align: bottom; }
nav.basenav .nav__wrapper { font-size: 0; text-align: right; margin-top: 10px; }
nav.basenav .nav__wrapper > ul { display: inline-block; vertical-align: middle; }
nav.basenav .nav__wrapper > ul > li { display: table-cell; vertical-align: middle; font-size: 16px; }
nav.basenav .nav__wrapper a { text-decoration: none; }
nav.basenav .nav__wrapper ul.nav > li { padding: 0 10px; }
nav.basenav .nav__wrapper ul.nav > li.act a { color: #02468d; }
nav.basenav .nav__wrapper ul.nav > li.act > ul > li a { color: #3f312b; }
nav.basenav .nav__wrapper ul.nav > li.act > ul > li.act a { color: #02468d; }
nav.basenav .nav__wrapper ul.nav a {
  font-family: var(--nw-font-body);
  font-weight: bolder;
  display: block;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4);
  position: relative;
  text-transform: uppercase;
}
nav.basenav .nav__wrapper ul.nav a:after {
  content: '';
  height: 3px;
  width: 0;
  position: absolute;
  bottom: -3px;
  left: 0;
  display: block;
  background-color: #3f312b;
  transition: width 0.2s ease-in-out;
}
nav.basenav .nav__wrapper ul.nav a:hover:after { width: 100%; }
nav.basenav .nav__wrapper ul.lang { margin-left: 25px; }

.mobileNav { display: none; }
#nav-icon3 {
  display: block;
  width: 45px;
  height: 45px;
  position: absolute;
  top: 0;
  left: 0;
  transform: rotate(0deg);
  transition: .5s ease-in-out;
  cursor: pointer;
}
#nav-icon3 span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: #3f312b;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}
#nav-icon3 span:nth-child(1) { top: 0; }
#nav-icon3 span:nth-child(2), #nav-icon3 span:nth-child(3) { top: 13px; }
#nav-icon3 span:nth-child(4) { top: 26px; }
#nav-icon3.open span:nth-child(1), #nav-icon3.open span:nth-child(4) { top: 18px; width: 0%; left: 50%; }
#nav-icon3.open span:nth-child(2) { transform: rotate(45deg); }
#nav-icon3.open span:nth-child(3) { transform: rotate(-45deg); }

.nav li { position: relative; }
.nav li:hover > .subnav { display: block; }
.subnav {
  position: absolute;
  list-style: none;
  margin: 0;
  top: 100%;
  left: 0;
  padding: 30px 0 10px;
  z-index: 100;
  display: none;
  width: max-content;
}
.subnav li { padding: 10px 20px; text-align: left; }   /* Hintergrund: siehe Redesign "Sackmuster" */
.subnav-item.scrollbg { background: #fff; }

@media screen and (max-width: 1240px) {
  .mobileNav { display: block; width: 45px; height: 30px; position: absolute; bottom: 0; right: 20px; }
  #nav-icon3.open { top: 60px; }
  .subnav-item.scrollbg { background: #3f312b; }
  nav.basenav {
    display: none;
    position: absolute;
    top: 110px;
    left: 0;
    width: 100%;
    background-color: #3f312b;
    padding: 20px;
    z-index: 103;
    text-align: left;
  }
  nav.basenav ul.nav a { color: #fff; }
  nav.basenav .nav__wrapper ul.nav > li.act a { color: #fff; border-bottom: 2px solid #fff; }
  nav.basenav .nav__wrapper ul.nav > li.act > ul > li a { color: #fff; border: none; }
  nav.basenav .nav__wrapper ul.nav > li.act > ul > li.act a { color: #fff; border-bottom: 2px solid #fff; }
  .subnav { padding-top: 20px; }
  .subnav li { background: #3f312b !important; }
}

@media screen and (max-width: 1065px) {
  .mobileNav { z-index: 9999; }
  .subnav { width: 100%; line-height: 35px; position: relative; padding-top: 0; padding-bottom: 0; }
  .subnav li { padding: 0 20px; }
  #nav-icon3.open span:nth-child(2), #nav-icon3.open span:nth-child(3), #nav-icon3.open span:nth-child(4) { background-color: #fff; }
  nav.basenav {
    position: fixed;
    z-index: 9998;
    top: 99px;
    height: 100%;
    padding-top: 60px;
    background-color: #3f312b;
    background-image: url("../img/bgMobileNav.jpg");
    background-repeat: no-repeat;
    background-position: -250% 150%;
  }
  nav.basenav .nav__wrapper { text-align: left; }
  nav.basenav .nav__wrapper > ul > li { display: block; }
  nav.basenav .nav__wrapper ul.nav li a { padding-top: 10px; padding-bottom: 10px; font-size: 32px; }
  nav.basenav .nav__wrapper ul.nav li:last-child a { border-bottom: 0 none; }
  nav.basenav .nav__wrapper > ul { display: block; width: 100%; }
  nav.basenav .nav__wrapper ul.lang { margin-left: 0; }
  nav.basenav .nav__wrapper ul.nav > li { padding: 0; }
  .nav li.has_sub::before {
    position: absolute;
    content: url('../img/arrow_down.svg');
    right: 0;
    top: 13px;
    z-index: 1000000;
  }
  .nav li:nth-child(5):hover:before { cursor: pointer; }
}
@media screen and (max-width: 880px) {
  nav.basenav .nav__wrapper ul.nav > li { padding: 0 25px 0 0; }
}
@media screen and (max-width: 570px) {
  nav.basenav { top: 130px; }
}

/* --- Hero ------------------------------------------------------------------ */
.hero {
  height: 520px;
  background-color: transparent;
  text-align: center;
  color: #3f312b;
  position: relative;
}
.home .hero, .home .hero .basic__slider { height: 870px; }
.hero .slick-list, .hero .slick-track { height: 100%; }
.hero p.specialFont { text-shadow: 0px 2px 9px black; }   /* Farbe/Größe: siehe Redesign */
.hero h2 {
  text-transform: uppercase;
  margin: 20px 0 0;
  color: white;
  text-shadow: 0px 2px 9px rgba(0, 0, 0, 0.5);
}
.hero .basic__slider { height: 580px; }
.hero .basic__slider .slideitem {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 100%;
}
.hero .basic__slider .slick-dots { bottom: 33px; z-index: 999; }
.hero .basic__slider .slick-dots li { margin: 0; }
.hero .basic__slider .slick-dots li:nth-child(even) { position: relative; top: -20px; }
.hero .basic__slider .slick-dots li button { border-color: #fff; }
.hero .basic__slider .slick-dots li.slick-active button { border-color: #02468d; }

.hero .hero__about        { background-image: url("../bilder/about/about-header-darken.jpg"); }
.hero .hero__produkte     { background-image: url("../bilder/segmente-header.jpg"); }
.hero .hero__leistungen   { background-image: url("../bilder/service-header.jpg"); }
.hero .hero__verpackungen { background-image: url("../bilder/verpackungen-header.jpg"); }
.hero .hero__engagement   { background-image: url("../bilder/engagement-header.jpg"); }
.hero .hero__sustainablility { background-image: url("../bilder/sustainablility-header.jpg"); }
.hero .hero__career       { background-image: url("../bilder/karriere-header.jpg"); background-position: center; }

.hero.headerSpacingTop { margin-top: 120px; }
.hero .table__container > div { position: relative; padding-left: 30px; padding-right: 30px; }
.hero .new-badge { position: absolute; z-index: 9999; right: 50%; top: 20%; margin-right: -470px; }

.scrollMe {
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  z-index: 999;
  width: 36px;
  margin-left: -18px;
  text-decoration: none;
  animation: moveUpDown 1.5s linear infinite;
  color: white;
  text-shadow: 1px 1px 6px #000;
}
.scrollMe:after { content: "\e900"; font-size: 22px; }   /* Pfeil nach unten (icomoon) */
.scrollMe span { display: none; }
@keyframes moveUpDown {
  0%, 100% { bottom: 0; }
  50% { bottom: 10px; }
}

@media screen and (max-width: 1200px) {
  .home .hero, .hero, .home .hero .basic__slider { height: 600px; }
  .hero .new-badge { display: none; }
  .hero h2 { font-size: 45px; }
}
@media screen and (max-width: 760px) {
  .home .hero, .hero, .home .hero .basic__slider { height: 350px; }
  .hero h2 { font-size: 35px; margin-top: 0; }
  .hero p.specialFont { margin-bottom: 0; }
}
@media screen and (max-width: 630px) {
  .hero h2 { font-size: 28px; }
}
@media screen and (max-width: 500px) {
  .hero .table__container > div { padding: 0; }
  .hero__career { background-size: cover !important; background-position: 69% !important; }
}

/* --- Cookiebot ------------------------------------------------------------- */
a#CybotCookiebotDialogPoweredbyCybot { display: none !important; }
#CybotCookiebotDialogBody h2 {
  font-family: 'oswaldregular', 'Helvetica Neue', Arial, sans-serif;
  color: #02468d;
  font-size: 26px;
  line-height: 1.2em;
  font-weight: 400 !important;
}
#CybotCookiebotDialogBody div,
#CybotCookiebotDialogBody p {
  font-family: 'latoregular', 'Helvetica Neue', Arial, sans-serif !important;
  font-size: 18px !important;
  line-height: 1.4em !important;
  color: #5c5b5a !important;
}
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink.active {
  color: #02468d !important;
  border-bottom: 1px solid #02468d !important;
  border-color: #02468d !important;
}
#CybotCookiebotDialogNav .CybotCookiebotDialogNavItemLink:hover { color: #02468d !important; }
#CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonSliderWrapper input:focus-visible + span,
#CybotCookiebotDialog :focus-visible { outline: #02468d solid 2px !important; }

#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll {
  border: 2px solid #3f312b !important;
  font-size: 100% !important;
  padding: 0.5em 1.5em 0.5em !important;
  color: #444 !important;
  background: transparent !important;
  text-decoration: none !important;
  -webkit-font-smoothing: antialiased !important;
  transition: all 0.2s ease-in-out !important;
  display: inline-block !important;
  line-height: normal !important;
  white-space: nowrap !important;
  vertical-align: baseline !important;
  text-align: center !important;
  cursor: pointer !important;
  -webkit-user-drag: none !important;
  -webkit-user-select: none !important;
  user-select: none !important;
  position: relative !important;
  z-index: 2;
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 96%;
  height: 77%;
  display: block;
  border: 1px solid #3f312b;
  z-index: -1;
  transition: all 0.2s ease-in-out !important;
}
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover { color: #ffffff !important; }
#CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll:hover::before { background-color: #3f312b; }
#CybotCookiebotDialogBodyButtonDecline { border: 1px solid #3f312b !important; width: 22% !important; }

@media all and (max-width: 600px) {
  #CybotCookiebotDialogBodyButtonDecline { width: 100% !important; }
}

@media screen and (min-width: 1280px) {
  #CybotCookiebotDialogPoweredbyImage { max-height: 50px !important; }
  #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyButtonAccept,
  #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonAccept,
  #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowAll,
  #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonCustomize,
  #CybotCookiebotDialogFooter #CybotCookiebotDialogBodyLevelButtonLevelOptinAllowallSelection { border-color: #3f312b !important; }
  #CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentCookieContainerButton:hover,
  #CybotCookiebotDialog .CookieCard .CybotCookiebotDialogDetailBodyContentIABv2Tab:hover,
  #CybotCookiebotDialogBodyLevelButtonsSelectPane label:not([for='CybotCookiebotDialogBodyLevelButtonNecessary']) .CybotCookiebotDialogBodyLevelButtonDescription:hover,
  #CybotCookiebotDialogDetailBodyContentCookieContainerTypes .CybotCookiebotDialogDetailBodyContentCookieProvider:not(.CybotCookiebotDialogDetailBodyContentCookieInfoCount):hover { color: #02468d !important; }
  #CybotCookiebotDialogTabContent input:checked + .CybotCookiebotDialogBodyLevelButtonSlider { background-color: #02468d !important; }
  #CybotCookiebotDialog #CybotCookiebotDialogBodyContentText a,
  #CybotCookiebotDialog #CybotCookiebotDialogBodyLevelButtonIABHeaderViewPartnersLink,
  #CybotCookiebotDialog #CybotCookiebotDialogDetailBulkConsentList dt a,
  #CybotCookiebotDialog #CybotCookiebotDialogDetailFooter a,
  #CybotCookiebotDialog .CybotCookiebotDialogBodyLevelButtonIABDescription a,
  #CybotCookiebotDialog .CybotCookiebotDialogDetailBodyContentCookieLink,
  #CybotCookiebotDialogDetailBodyContentTextAbout a { color: #02468d !important; }
}


/* ==========================================================================
   4  REDESIGN 2026
   ========================================================================== */

/* --- Schriften ------------------------------------------------------------- */
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/montserrat-v31-latin/montserrat-v31-latin-regular.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/montserrat-v31-latin/montserrat-v31-latin-italic.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/montserrat-v31-latin/montserrat-v31-latin-600.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/montserrat-v31-latin/montserrat-v31-latin-600italic.woff2') format('woff2');
}
@font-face {
  font-display: swap;
  font-family: 'Charlotte';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/charlotte/charlotte.woff2') format('woff2'),
       url('../fonts/charlotte/charlotte.woff') format('woff');
}
/* MODERN AGE REGULAR – Display "SNACK SMART." (Schriftdatei steht noch aus)
   Dateien nach fonts/modern-age/ legen, Block aktivieren und unten
   --nw-font-display einkommentieren.
@font-face {
  font-display: swap;
  font-family: 'Modern Age';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/modern-age/modern-age.woff2') format('woff2'),
       url('../fonts/modern-age/modern-age.woff') format('woff');
} */

/* --- Variablen --------------------------------------------------------------
   Erdnuss-Beige: cmyk(8,21,43,13) / rgb(215,187,144) / #D7BB90
   Schwarz:       cmyk(91,79,62,97) / rgb(1,1,1)       / #010101          */
:root {
  --nw-beige: #D7BB90;
  --nw-beige-light: #F3E9DA;   /* aufgehellt, für großflächige Hintergründe */
  --nw-beige-pale: #FAF5EE;    /* sehr hell, ersetzt das Sackmuster */
  --nw-lockup-bg: #F4F0EA;     /* Fläche hinter der Hero-Headline */
  --nw-beige-dark: #8A6A3E;    /* abgedunkelt, für Text/Kontrast auf Weiß */
  --nw-beige-darker: #8B5E3C;
  --nw-black: #010101;
  --nw-blue: #02468d;          /* Blau der Hauptzeilen / Fruitwork */
  --nw-font-body: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  /* --nw-font-display: 'Modern Age', 'Montserrat', 'Helvetica Neue', Arial, sans-serif; */

  /* Schreibschrift Charlotte */
  --nw-font-script: 'Charlotte', 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --nw-script-size: 44px;         /* Dachzeilen, "Segment", Produktsicherheit */
  --nw-script-size-hero: 58px;    /* Zeile 1 in den Hero-Bildern */
  --nw-script-size-small: 34px;   /* Unterzeilen in Säulen-/Benefit-Kacheln */
  --nw-script-stroke: 0.035em;    /* "fett": Strichverstärkung (Charlotte gibt es nur als Regular) */

  /* Abstände */
  --nw-section-space: 60px;      /* Abstand Inhalt ↔ Sektionskante */
  --nw-block-space: 40px;         /* Abstand Überschrift → Kachel-Raster */
}
@media screen and (max-width: 1200px) {
  :root { --nw-script-size-hero: 48px; }
}
@media screen and (max-width: 768px) {
  :root {
    --nw-script-size: 36px; --nw-script-size-hero: 42px; --nw-script-size-small: 30px;
    --nw-section-space: 50px; --nw-block-space: 24px;
  }
}
@media screen and (max-width: 480px) {
  :root { --nw-script-size: 32px; --nw-script-size-hero: 36px; --nw-script-size-small: 28px; }
}

/* --- Seitenhintergrund: Erdnussbeige statt Sackmuster (Briefing Folie 2) --- */
body {
  font-family: var(--nw-font-body);
  line-height: 1.6em;
  background-color: var(--nw-beige-pale);
  background-image: none;
}
.basic__section.bg__lightbeige { background: var(--nw-beige-light); }
.subnav li,
.mapimagewrap,
#CybotCookiebotDialog {
  background-color: var(--nw-beige-pale);
  background-image: none;
}

/* --- Schreibschrift Charlotte ------------------------------------------------
   Alle Selektoren mit "html" davor: eine Stufe spezifischer als die Altregeln.
   "Fetter" über eine Kontur in Textfarbe (--nw-script-stroke).            */
html .specialFont,
html p.specialFont,
html h1.specialFont,
html .basic__section h1.specialFont,
html ul.regions__slider__nav li {
  font-family: var(--nw-font-script);
  font-weight: 400;
  font-style: normal;
  text-transform: none;
  letter-spacing: normal;
  font-synthesis: none;
  -webkit-text-stroke: var(--nw-script-stroke) currentColor;
}

/* Größen: Standard */
html .specialFont,
html p.specialFont,
html h1.specialFont,
html .basic__section h1.specialFont,
html .basic__section .inner > .specialFont:first-child,
html .produktsicherheit .alw_wrapper h2 + p.specialFont,
html .value-tiles .value-tile p.specialFont {
  font-size: var(--nw-script-size);
  line-height: 1.3em;
}
/* Größen: Hero */
html .hero p.specialFont,
html .hero h1.specialFont,
html .hero .slideitem p.specialFont,
html .hero .slideitem h1.specialFont {
  font-size: var(--nw-script-size-hero);
  line-height: 1.3em;
}
/* Unterzeilen in den Kacheln ("Das Herzstück unseres Erfolgs." …) */
html .aboutuspillargrid .pillar-grid .pillar > p.specialFont,
html .benefits .pillar-grid .pillar > p.specialFont {
  font-size: var(--nw-script-size-small) !important;
  line-height: 1.25em;
}
/* Hashtags unter der Weltkarte (produkte.php) */
html ul.regions__slider__nav li { font-size: 26px; line-height: 1.3em; }

/* Farben */
.specialFont, p.specialFont { color: var(--nw-beige-dark); }
.hero p.specialFont,
.color__white p.specialFont,
.bg__brown p.specialFont,
.bg__brightbrown p.specialFont { color: #fff; }

/* H1 mit .specialFont (Dachzeile als Überschrift) */
h1.specialFont { margin: 0.25em 0 1em 0; }
h1.specialFont,
.basic__section h1.specialFont { color: var(--nw-beige-dark); }
.hero h1.specialFont,
.color__white h1.specialFont,
.bg__brown h1.specialFont,
.bg__brightbrown h1.specialFont { color: #fff; }

/* --- Überschriften --------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
  margin-top: 1.5em;
  margin-bottom: 0.8em;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  text-transform: uppercase;
  line-height: 1.3em;
  font-weight: bolder;
}
h1 { font-size: 2.3em; }
h2 { font-size: 2em; }
h3 { font-size: 1.8em; }
h4 { font-size: 1.5em; }
/* Display-Schrift (Modern Age), solange --nw-font-display nicht gesetzt ist: Montserrat */
h1, h2,
.basic__section h1,
.basic__section h2,
.color__white h1,
.color__white h2 {
  font-family: var(--nw-font-display);
  letter-spacing: 0.5px;
}
.basic__section h1,
.basic__section h2,
.basic__section h4 { color: var(--nw-blue); }
.color__white h1, .color__white h2, .color__white h3, .color__white h4 { color: #fff; }
.basic__section h4 { font-size: 1.5em; }   /* bleibt: schlägt u. a. .identity-word */
.basic__section.unternehmensstruktur h4 { font-size: 25px; }

/* --- Gezeichnete Linien ---------------------------------------------------- */
.antrieb .line {
  display: block;
  background: url("../neue-bilder-2026/logo-neu-2026/Geschwungener-Strich.png") bottom center no-repeat;
  background-size: 180px;
  position: relative;
}
.compass-box .longline {
  display: block;
  background: url("../neue-bilder-2026/logo-neu-2026/Geschwungener-Strich.png") bottom left no-repeat;
  background-size: 600px;
  height: 40px;
  margin-bottom: -20px;
  position: absolute;
}
@media (max-width: 700px) {
  .compass-box .longline { background-image: none; }
}

/* --- Karriere / Facts ------------------------------------------------------ */
.career h5 { font-size: 1.5rem; }
.career .banner { overflow: hidden; max-width: 100%; margin: 0 auto; }
.career .banner img { width: 100%; height: 100%; }
.facts .table__container.align__top .w20 h4.pt40 { color: var(--nw-blue); font-size: 25px; }
.facts .inner { max-width: 100%; }

/* ==========================================================================
   nwhero – Hero / Claim-Panel (eigener Prefix, kollidiert nicht mit Bestand)
   ========================================================================== */
.nwhero {
  --nwhero-beige:        #f3f0eb;
  --nwhero-ink:          #14100d;
  --nwhero-panel-max:    1180px;
  --nwhero-content-max:  1400px;
  --nwhero-radius:       clamp(18px, 2.6vw, 44px);
  --nwhero-min-height:   clamp(360px, 46vw, 640px);
  --nwhero-eyebrow-size:     1.75cqw;
  --nwhero-eyebrow-min:      12px;
  --nwhero-eyebrow-tracking: .01em;
  --nwhero-eyebrow-weight:   500;
  --nwhero-eyebrow-gap:      1.28em;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.nwhero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}
.nwhero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: var(--nwhero-min-height);
  max-width: var(--nwhero-content-max);
  margin-inline: auto;
  padding: clamp(28px, 5vw, 90px) clamp(16px, 4vw, 60px);
}
.nwhero__kicker {
  margin: 0 0 clamp(12px, 1.6vw, 26px);
  padding-inline-start: clamp(4px, .8vw, 14px);
  color: #fff;
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(17px, 2.5vw, 38px);
  line-height: 1.2;
  text-wrap: balance;
}
.nwhero__panel {
  container-type: inline-size;
  container-name: nwpanel;
  position: relative;
  width: 100%;
  max-width: var(--nwhero-panel-max);
  background: var(--nwhero-beige);
  border-radius: var(--nwhero-radius);
  color: var(--nwhero-ink);
  padding: 40px;
}
.hero .hero__career .nwhero__panel p.specialFont,
.hero .hero__career .nwhero__panel h2 { line-height: 1em; color: #000; }
.hero .hero__career .nwhero__panel h2 { margin-bottom: 20px; }
.nwhero__panel-inner {
  position: relative;
  z-index: 1;
  padding: max(24px, 3.9cqw) max(18px, 5.0cqw) max(22px, 3.2cqw) max(18px, 5.5cqw);
}
.nwhero__eyebrow {
  position: absolute;
  left: 20px;
  top: 0;
  display: inline-block;
  margin: 0 0 var(--nwhero-eyebrow-gap);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: var(--nwhero-eyebrow-weight);
  font-size: max(var(--nwhero-eyebrow-min), var(--nwhero-eyebrow-size));
  line-height: 1;
  letter-spacing: var(--nwhero-eyebrow-tracking);
  text-transform: uppercase;
  white-space: nowrap;
  color: inherit;
}
.nwhero__eyebrow img { height: 12px; margin-left: 15px; width: 330px; }
.nwhero__rule {
  position: absolute;
  left: -.89em;
  right: -1.63em;
  top: calc(100% + .02em);
  width: auto;
  height: .79em;
  display: block;
  color: inherit;
  pointer-events: none;
}
.nwhero__claim { margin: 0; line-height: 0; }
.nwhero__claim img,
.nwhero__claim--logo img { display: block; width: 100%; height: auto; }
.nwhero__nut {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: max(64px, 12.5cqw);
  height: auto;
  transform: translate(14%, 18%);
  pointer-events: none;
  user-select: none;
}

/* Varianten */
.nwhero--page { --nwhero-min-height: clamp(200px, 22vw, 320px); background: transparent; }
.nwhero--page .nwhero__inner { padding-block: clamp(18px, 2.6vw, 44px); }
.nwhero--plain { background: transparent; overflow: visible; }
.nwhero--start .nwhero__panel { margin-inline-end: auto; }

/* Unterseiten: .hero ist dort nur 520px hoch – min-height des Inner raus */
body:not(.home) .nwhero:not(.nwhero--bare) .nwhero__inner {
  min-height: 0;
  padding-block: clamp(20px, 3vw, 50px);
}

/* Lockup ohne Panel (Kapitel 5 „Unser gemeinsamer Kompass“) */
.nwhero--bare { overflow: visible; }
.nwhero--bare .nwhero__inner { min-height: 0; padding: 0; margin-inline: 0; }
.nwhero--bare .nwhero__panel { max-width: 620px; padding: 0; background: none; border-radius: 0; }
.nwhero--bare .nwhero__panel-inner { padding: 0; }
.nwhero--bare .nwhero__eyebrow { position: relative; left: auto; top: auto; margin: 0 0 var(--nwhero-eyebrow-gap); }

/* Startseite: Panel dezenter, weniger Luft um das Logo (01.10.) */
.home .nwhero__panel {
  background: rgba(243, 240, 235, .55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: none;
  padding: clamp(14px, 2vw, 28px) clamp(18px, 3vw, 44px);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .home .nwhero__panel { background: rgba(243, 240, 235, .75); }
}
.home .nwhero__panel-inner { padding: 0; }

@media (max-width: 620px) {
  .nwhero__panel-inner { padding: 22px 20px 24px; }
  .nwhero__eyebrow { font-size: 12px; }
  .nwhero__nut { width: 74px; }
  .home .nwhero__panel { padding: 14px 16px; }
}
@supports not (container-type: inline-size) {
  .nwhero__panel-inner { padding: clamp(24px, 3.4vw, 44px) clamp(18px, 4.4vw, 56px) clamp(22px, 2.8vw, 38px) clamp(18px, 4.9vw, 62px); }
  .nwhero__eyebrow { font-size: clamp(12px, 1.55vw, 19px); }
  .nwhero__nut { width: clamp(64px, 11vw, 140px); }
}
@media print {
  .nwhero { background: none; }
  .nwhero__bg, .nwhero__nut { display: none; }
  .nwhero__kicker { color: #000; }
}

/* ==========================================================================
   HERO-LOCKUP "Fruitwork Group / SNACK SMART. Live better!" (Folie 4)
   ========================================================================== */
.hero-lockup {
  position: relative;
  display: block;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  background: var(--nw-lockup-bg);
  border-radius: 42px;
  padding: 34px 4.2% 30px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.16);
  text-align: left;
}
.eyebrow-group {
  font-family: var(--nw-font-body);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 3px;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  display: inline-block;
  padding-bottom: 4px;
  margin: 0 0 10px;
}
.hero-lockup .eyebrow-group {
  font-weight: 500;
  letter-spacing: 3.5px;
  color: var(--nw-black);
  border-bottom: 2px solid var(--nw-black);
  padding: 0 26px 4px 0;
  margin: 0 0 8px;
  text-shadow: none;
}
h1.snack-smart-lockup,
h2.snack-smart-lockup,
h3.snack-smart-lockup {
  font-family: var(--nw-font-display);
  color: var(--nw-black);
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.16em;
  margin: 0;
  line-height: 1;
  text-shadow: none;
  font-size: clamp(24px, 4.6vw, 62px);   /* mit Modern Age ggf. erhöhen */
  text-transform: uppercase;
  letter-spacing: 0.5px;
  max-width: 100%;
}
.snack-smart-lockup .live-better {
  font-family: var(--nw-font-body);
  text-transform: none;
  font-size: 0.86em;
  font-weight: normal;
  white-space: nowrap;
}
.hero-lockup .peanut-graphic {
  position: absolute;
  right: 1.2%;
  bottom: -14px;
  width: 13%;
  max-width: 190px;
  height: auto;
  pointer-events: none;
}
.mini-lockup { margin-top: 30px; display: inline-block; text-align: left; }
.mini-lockup .snack-smart-lockup { font-size: clamp(22px, 3vw, 38px); }

/* --- Farben / Buttons ------------------------------------------------------ */
strong.blue { color: var(--nw-beige-dark); }

/* --- Erdnussbeiger Sektionshintergrund ------------------------------------- */
.bg__peanut-beige {
  background-color: var(--nw-beige-light) !important;
  background-image: none !important;
  color: var(--nw-black) !important;
}
.hero .bg__peanut-beige h1,
.hero .bg__peanut-beige h2,
.hero .bg__peanut-beige h3,
.hero .bg__peanut-beige p,
.hero .bg__peanut-beige p.specialFont {
  color: var(--nw-black) !important;
  text-shadow: none !important;
}

/* --- Werte-Kacheln "Kompetenz | Vielfalt | Innovation" --------------------- */
.value-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 40px;
  justify-content: center;
  margin-top: 40px;
}
.value-tiles .value-tile { text-align: center; }
.value-tiles .value-tile .value-icon { margin: 0 auto 20px; color: var(--nw-beige-dark); }
.value-tiles .value-tile .value-icon svg,
.value-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; }
.value-tiles .value-tile p.specialFont { margin-bottom: 2px; }
.value-tiles .value-tile h3 { margin-bottom: 12px; }
.value-icon { margin: 0 auto 16px; color: var(--nw-beige-dark); }   /* Größe: Icons 64px (unten) */

/* --- Nummerierte Listen ---------------------------------------------------- */
ol.numbered-list { list-style: none; counter-reset: nw-counter; margin: 15px 0 0; padding: 0; text-align: left; }
ol.numbered-list li { counter-increment: nw-counter; position: relative; padding-left: 40px; margin-bottom: 10px; }
ol.numbered-list li::before {
  content: counter(nw-counter, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--nw-font-body);
  font-weight: 600;
  color: var(--nw-beige-dark);
}

/* --- Kapitel 2 "Unsere Identität" ------------------------------------------ */
.identity-word {
  font-family: var(--nw-font-display);
  font-size: clamp(24px, 3.4vw, 32px);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.identity-word.identity-script {
  font-family: var(--nw-font-body);
  text-transform: none;
  font-size: clamp(26px, 3.8vw, 36px);
}
/* Wortmarken als Grafik: fester Kasten, gemeinsame Unterkante.
   Zum Nachjustieren nur die vier Prozentwerte ändern. */
.identity-word--img {
  aspect-ratio: 100 / 34;
  max-width: 260px;
  margin: 0 auto 14px;
  padding: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-size: 0;
  line-height: 0;
}
.identity-word--img img { display: block; height: auto; max-width: 100%; max-height: none; }
.identity-word--snack  img { width: 80%; }
.identity-word--smart  img { width: 83%; }
.identity-word--live   img { width: 44.5%; }    /* gleiche Schriftgröße wie "better!" (02.10.) */
.identity-word--better img { width: 58%; }

/* --- Kapitel 5 "Unser gemeinsamer Kompass" / Spalten-Layouts --------------- */
.compass-box {
  margin: 0 auto;
  padding: 0 80px 80px 40px;
  border: 2px solid var(--nw-black);
  border-radius: 4px;
  background: var(--nw-beige-light);
  display: flex;
  flex-direction: column;
}
.compass-box .column,
.map .column { display: flex; align-items: center; }
.map .column { gap: 50px; }
.compass-box .column .columnclaim,
.karrierebox .column .columnclaim { display: flex; flex-wrap: wrap; text-align: left; width: 100%; }
.compass-box .underline img { height: 10px; margin-top: -20px; position: absolute; }
.compass-highlight-1 { color: var(--nw-beige-darker); }
.compass-highlight-2 { color: var(--nw-black); }
.compass-highlight-3 { color: var(--nw-beige-dark); }
.compass-underline { text-decoration: underline; text-underline-offset: 4px; }

.basic__section.aboutus { margin-top: 100px; }
.aboutus .column .columnclaim { display: flex; align-items: center; justify-content: center; gap: 20px; }
.aboutus .aboutus-logo { height: auto; }
.map .column .columnclaim { width: 50%; }

.karrierebox { padding-bottom: 50px; }
.karrierebox .column .columnclaim p { font-weight: bold !important; }
.karrierebox table tr th:first-of-type { font-weight: 700; }
.karrierebox table tr th:nth-of-type(2) { font-weight: 400; }

/* --- Checklisten ----------------------------------------------------------- */
ul.checklist { list-style: none; margin: 15px 0; padding: 0; text-align: left; display: inline-block; }
ul.checklist li { padding-left: 26px; position: relative; margin-bottom: 6px; }
ul.checklist li::before { content: "\2713"; position: absolute; left: 0; color: var(--nw-beige-dark); font-weight: bold; }

/* --- Platzhalter für noch fehlende Bilder ---------------------------------- */
.asset-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: repeating-linear-gradient(45deg, #f3e9da, #f3e9da 10px, #ece0cc 10px, #ece0cc 20px);
  border: 2px dashed var(--nw-beige-dark);
  color: var(--nw-beige-dark);
  font-family: var(--nw-font-body);
  font-size: 14px;
  font-weight: 600;
  min-height: 220px;
  padding: 20px;
}

/* --- Säulen- / Kachel-Raster ----------------------------------------------- */
.basic__section.aboutuspillargrid .inner { max-width: 100%; }
.basic__section.benefits .inner { max-width: 1200px; }

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 2.5rem;
  margin-top: var(--nw-block-space);
  max-width: 1200px;
}
.benefits .pillar-grid,
.whowesearch .pillar-grid,
.kompetenz .pillar-grid,
.aboutuspillargrid .pillar-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: var(--nw-block-space) auto 0;
}
@media screen and (max-width: 1020px) {
  .pillar-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media screen and (max-width: 860px) {
  .pillar-grid { grid-template-columns: repeat(1, minmax(0, 1fr)); }
}
/* letzte Reihe mittig (861px+ siehe Korrekturrunde A7) */
@media screen and (min-width: 769px) and (max-width: 860px) {
  .aboutuspillargrid .pillar-grid,
  .benefits .pillar-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .aboutuspillargrid .pillar-grid > .pillar,
  .benefits .pillar-grid > .pillar { grid-column: span 2; }
  .aboutuspillargrid .pillar-grid > .pillar:nth-child(3n+1):nth-last-child(2),
  .benefits .pillar-grid > .pillar:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .aboutuspillargrid .pillar-grid > .pillar:nth-child(3n+1):last-child,
  .benefits .pillar-grid > .pillar:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}
.pillar-grid .pillar {
  display: grid;
  grid-row: span 4;             /* h5, .specialFont, p, .value-icon */
  grid-template-rows: subgrid;
  row-gap: 0.75rem;
  align-content: start;
}
.pillar-grid .pillar > * { margin: 0; }
.pillar-grid .pillar > .value-icon { align-self: end; justify-self: center; }
.pillar-grid .pillar > .value-icon img { display: block; margin: 0 auto; }

/* Produktsicherheit (Startseite) */
.produktsicherheit .pillar-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 2.5rem;
  max-width: 1200px;
  margin: 20px auto;
}
.produktsicherheit .pillar-grid .pillar {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  row-gap: 0.75rem;
  align-content: start;
}
.produktsicherheit .pillar-grid .pillar:has(> .checklist) { grid-column: 1 / -1; grid-row: auto; grid-template-rows: auto; }
.produktsicherheit .checklist {
  --check-color: #fff;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 1rem;
}
.produktsicherheit .checklist li { position: relative; padding-left: 2rem; line-height: 1.5; width: min-content; }
.produktsicherheit .checklist li::before {
  content: "";
  position: absolute;
  left: 0.35rem;
  top: 0.2em;
  width: 0.45rem;
  height: 0.85rem;
  border: solid var(--check-color, currentColor);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
@media (max-width: 991px) {
  .produktsicherheit .pillar-grid,
  .produktsicherheit .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .produktsicherheit .pillar-grid { grid-template-columns: 1fr; margin: 20px auto; }
  .produktsicherheit .checklist { grid-template-columns: 1fr; }
}

/* Benefit-Icons ("nut just benefits.") */
.benefits .pillar-icon { display: block; margin: 0 auto 16px; }
@media (max-width: 768px) {
  .benefits .pillar-icon { margin-bottom: 12px; }
}

/* --- Konsumtrends (produkte.php): gleich hohe Spalten per subgrid ---------- */
.bg-vorteile .table__container {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 2rem;
  row-gap: 2.5rem;
  align-items: start;
  height: auto;
}
.bg-vorteile .table__container > .w25 {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 0;
  width: auto;
  height: auto;
  float: none;
}
@media (max-width: 1024px) {
  .bg-vorteile .table__container { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .bg-vorteile .table__container { grid-template-columns: minmax(0, 1fr); }
}

/* --- Facts zu nutwork (Folie 57) ------------------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  justify-content: center;
  gap: 24px;
  margin: 40px auto 0;
  max-width: 1000px;
}
.stat-row .stat { text-align: center; }
.stat-row .stat .stat-number {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 74px;
  padding: 10px 14px;
  background: var(--nw-black);
  color: #fff;
  border-radius: 4px;
  font-family: var(--nw-font-display);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.05;
  margin-bottom: 12px;
}
.stat-row .stat.stat--plain .stat-number { background: transparent; color: var(--nw-beige-dark); padding: 10px 0; }
.stat-row .stat .stat-label { display: block; font-size: 14px; line-height: 1.35; color: #5c5b5a; }

/* --- Engagement: Abschnittsüberschrift "Vergangene Projekte" --------------- */
.section-divider { text-align: center; margin: 0; padding: var(--nw-section-space) 20px 0; }
.section-divider h2 { margin: 0 0 100px; color: var(--nw-blue); }

/* --- Unternehmensstruktur -------------------------------------------------- */
.unternehmensstruktur .column {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  column-gap: 40px;
  row-gap: 6px;
  align-items: start;
  width: 100%;
  float: none;
  padding-top: 40px;
}
.unternehmensstruktur .column .columnclaimimage { grid-column: 1; grid-row: 1 / span 2; justify-self: center; }
.unternehmensstruktur .columnclaimtext { min-width: 280px; }
.unternehmensstruktur .column .columnclaimtext { grid-column: 2; grid-row: 1; min-width: 0; }
.unternehmensstruktur .column > p { grid-column: 2; grid-row: 2; margin: 0; }
.unternehmensstruktur .columnclaimtext .pt40 { padding-top: 0; }
.unternehmensstruktur .columnclaimtext h4,
.unternehmensstruktur .columnclaimtext .specialFont {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: 700;
  line-height: 1.3;
}
/* Logos nach optischer Fläche statt gleicher Höhe */
.unternehmensstruktur .columnclaimimage img { display: block; height: auto; width: auto; max-width: 100%; }
.unternehmensstruktur .columnclaimimage img[src*="FRUITWORK_HANDELGESELLSCHAFT"] { width: 170px; }
.unternehmensstruktur .columnclaimimage img[src*="FDC_Logo"]                      { width: 115px; }
.unternehmensstruktur .columnclaimimage img[src$="bilder/logo.png"]               { width: 94px; }
/* Foto FDC-Eingang unter dem FDC-Text (01.10.) */
.unternehmensstruktur .column > .struktur-bild { grid-column: 2; grid-row: 3; margin: 20px 0 0; }
.unternehmensstruktur .column > .struktur-bild img { display: block; width: 100%; height: auto; }
@media screen and (max-width: 600px) {
  .unternehmensstruktur .column { grid-template-columns: minmax(0, 1fr); }
  .unternehmensstruktur .column .columnclaimimage { grid-column: 1; grid-row: 1; justify-self: start; }
  .unternehmensstruktur .column .columnclaimtext { grid-column: 1; grid-row: 2; }
  .unternehmensstruktur .column > p { grid-column: 1; grid-row: 3; }
  .unternehmensstruktur .column > .struktur-bild { grid-column: 1; grid-row: 4; }
}

/* --- Leistungen / Produkte ------------------------------------------------- */
.leistungen .column { display: flex; gap: 50px; justify-content: center; }
.leistungen .column .columnclaim { padding-top: 20px; padding-bottom: 20px; }
.leistungen h4,
.produkte h4 { font-size: 2em; color: var(--nw-blue); }

/* --- Hero-Hintergrund Startseite (Briefing Folie 5) ------------------------
   ACHTUNG: Adobe-Stock-VORSCHAUDATEI (mit Wasserzeichen) – vor dem Livegang
   durch die lizenzierte Datei ersetzen, nur diese Zeile tauschen.         */
.hero .hero__home__slide1 {
  background-image: url("../neue-bilder-2026/bilder/startseite/AdobeStock_26619919-small.jpg") !important;
  background-position: center center !important;
  background-size: cover !important;
}

/* --- Karrierewege als Reihen ("Finde Deinen Weg bei uns") ------------------ */
.pageWrapper .path-grid.path-grid--rows {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0 0 40px;
  grid-template-columns: none;
}
.pageWrapper .path-grid--rows .path-tile {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 28px 0;
  text-align: left;
  background: none;
  box-shadow: none;
  border-radius: 0;
  border-top: 1px solid #D7BB90;
}
.pageWrapper .path-grid--rows .path-tile:last-child { border-bottom: 1px solid #D7BB90; }
.pageWrapper .path-grid--rows .path-tile h4 { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.pageWrapper .path-grid--rows .path-emoji { display: inline-block; flex: 0 0 auto; margin: 0; font-size: 1.6em; line-height: 1; }
.pageWrapper .path-grid--rows .path-tile p { margin-bottom: 8px; }
.pageWrapper .path-grid--rows .path-tile p:last-child { margin-bottom: 0; }
.path-outro h3 { color: var(--nw-blue); }
@media (max-width: 480px) {
  .pageWrapper .path-grid--rows .path-tile { padding: 22px 0; }
  .pageWrapper .path-grid--rows .path-emoji { font-size: 1.4em; }
}

/* --- Redesign: Responsive -------------------------------------------------- */
@media all and (max-width: 1024px) {
  .hero-lockup { padding: 26px 4% 24px; border-radius: 32px; }
}
@media all and (max-width: 768px) {
  .hero-lockup { padding: 20px 22px 18px; border-radius: 22px; }
  .hero-lockup .peanut-graphic { width: 16%; bottom: -10px; }
  .hero-lockup .eyebrow-group, .eyebrow-group { font-size: 10px; letter-spacing: 2px; }
  .snack-smart-lockup { flex-wrap: wrap; gap: 0.1em 0.2em; }
  .value-tiles { gap: 34px; }
  .basic__section.aboutus { margin-top: 250px; }
  .benefits .pillar-grid,
  .whowesearch .pillar-grid,
  .kompetenz .pillar-grid,
  .aboutuspillargrid .pillar-grid { grid-template-columns: repeat(1, 1fr); }
  .pillar-grid, .path-grid { gap: 20px; }
  .pillar-grid .pillar, .path-grid .path-tile { padding: 22px; }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .compass-box { border-width: 1px; }
  .asset-placeholder { min-height: 150px; font-size: 13px; }
  ol.numbered-list li { padding-left: 34px; }
  .karrierebox .column,
  .compass-box .column { display: block !important; }
  .compass-box .underline .specialFont.longline { margin: 0 30px 30px 0; }
  .antrieb .w25 { width: 100%; }
  .aboutus .aboutus-logo { width: 300px; }
  .aboutus .aboutus-icon { display: none; }
}
@media all and (max-width: 480px) {
  .hero-lockup { padding: 16px 16px 14px; border-radius: 16px; }
  .hero-lockup .peanut-graphic { width: 20%; bottom: -8px; right: 2%; }
  .snack-smart-lockup { font-size: clamp(24px, 8.5vw, 34px); }
  .stat-row { grid-template-columns: 1fr; }
  .stat-row .stat .stat-number,
  .stat-row .stat.stat--plain .stat-number { min-height: 62px; }
  .value-tiles { gap: 28px; }
}


/* ==========================================================================
   3  BESTANDSKOMPONENTEN
   ========================================================================== */

/* --- Buttons --------------------------------------------------------------- */
.btn, button, input[type='submit'] {
  display: inline-block;
  line-height: normal;
  white-space: nowrap;
  vertical-align: baseline;
  text-align: center;
  cursor: pointer;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
  font-size: 100%;
  padding: 0.5em 1.5em 0.5em;
  color: rgba(0, 0, 0, 0.8);
  border: none transparent;
  background: transparent;
  text-decoration: none;
  border-radius: 2px;
  -webkit-font-smoothing: antialiased;
  transition: all 0.2s ease-in-out;
}
.btn::-moz-focus-inner, button::-moz-focus-inner, input[type='submit']::-moz-focus-inner { padding: 0; border: 0; }
.btn:focus, button:focus, input[type='submit']:focus { outline: none; }
.btn:-moz-focusring, button:-moz-focusring, input[type='submit']:-moz-focusring { outline-color: rgba(0, 0, 0, 0.85); }
.btn.blue, button.blue, input[type='submit'].blue { background-color: #02468d; color: #fff; }
.btn.blue:hover, button.blue:hover, input[type='submit'].blue:hover { background-color: #035fbf; }

.border { border: 2px solid #3f312b; padding: 3px; font-size: 20px; transition: border-color 0.2s ease-in-out; }
.border span { border: 1px solid #3f312b; display: block; padding: 10px 20px; transition: all 0.2s ease-in-out; }
.border:hover { border-color: #5d4940; }
.border:hover span { background-color: #3f312b; color: #fff; }

/* --- Slick-Slider ---------------------------------------------------------- */
.slick-slider {
  position: relative;
  display: block;
  box-sizing: border-box;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
.slick-list { position: relative; display: block; overflow: hidden; margin: 0; padding: 0; }
.slick-list:focus { outline: none; }
.slick-list.dragging { cursor: pointer; }
.slick-slider .slick-track, .slick-slider .slick-list { transform: translate3d(0, 0, 0); }
.slick-track { position: relative; top: 0; left: 0; display: block; }
.slick-track:before, .slick-track:after { display: table; content: ''; }
.slick-track:after { clear: both; }
.slick-loading .slick-track { visibility: hidden; }
.slick-slide { display: none; float: left; height: 100%; min-height: 1px; outline: none; }
[dir='rtl'] .slick-slide { float: right; }
.slick-slide img { display: block; }
.slick-slide.slick-loading img { display: none; }
.slick-slide.dragging img { pointer-events: none; }
.slick-initialized .slick-slide { display: block; }
.slick-loading .slick-slide { visibility: hidden; }
.slick-vertical .slick-slide { display: block; height: auto; border: 1px solid transparent; }
.slick-arrow.slick-hidden { display: none; }
.slick-loading .slick-list { background: #fff url('../img/ajax-loader.gif') center center no-repeat; }

@font-face {
  font-family: 'slick';
  font-weight: normal;
  font-style: normal;
  src: url('../fonts/icons/slick.eot');
  src: url('../fonts/icons/slick.eot?#iefix') format('embedded-opentype'),
       url('../fonts/icons/slick.woff') format('woff'),
       url('../fonts/icons/slick.ttf') format('truetype'),
       url('../fonts/icons/slick.svg#slick') format('svg');
}
.slick-prev, .slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 50%;
  display: block;
  width: 25px;
  height: 25px;
  padding: 0;
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
  z-index: 101;
}
.slick-prev:hover, .slick-prev:focus, .slick-next:hover, .slick-next:focus { color: transparent; outline: none; background: transparent; }
.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }
.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity: 0.25; }
.slick-prev:before, .slick-next:before { font-size: 25px; color: #3f312b; }
.slick-prev:before { content: "\e901"; }   /* Pfeil links (icomoon) */
.slick-next:before { content: "\e902"; }   /* Pfeil rechts (icomoon) */
.slick-prev { left: 10px; }
.slick-next { right: 10px; }

.slick-dots {
  position: absolute;
  bottom: -25px;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
}
.slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; }
.slick-dots li button {
  font-size: 0;
  line-height: 0;
  display: block;
  width: 20px;
  height: 20px;
  padding: 0;
  background-color: #fff;
  cursor: pointer;
  color: transparent;
  border: 2px solid #3f312b;
  outline: none;
  transform: rotate(-45deg);
}
.slick-dots li.slick-active button { background-color: #02468d; border-color: #02468d; }

/* --- Magnific Popup -------------------------------------------------------- */
.white-popup { position: relative; width: auto; margin: 20px auto; }
.brown-close .mfp-close { color: #3f312b !important; }
.brown-close .mfp-close:before, .brown-close .mfp-close:after { border-color: #3f312b !important; }
.image-popup-link { display: block; outline: none; }

.mfp-zoom-out .mfp-with-anim { opacity: 0; transition: all 0.3s ease-in-out; transform: scale(1.3); }
.mfp-zoom-out.mfp-bg { opacity: 0; transition: all 0.3s ease-out; }
.mfp-zoom-out.mfp-ready .mfp-with-anim { opacity: 1; transform: scale(1); }
.mfp-zoom-out.mfp-ready.mfp-bg { opacity: 0.8; }
.mfp-zoom-out.mfp-removing .mfp-with-anim { transform: scale(1.3); opacity: 0; }
.mfp-zoom-out.mfp-removing.mfp-bg { opacity: 0; }

.mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 9998; overflow: hidden; position: fixed; background-color: rgba(63, 49, 43, 0.8); }
.mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; }
.mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; box-sizing: border-box; }
.mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
.mfp-align-top .mfp-container:before { display: none; }
.mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; }
.mfp-inline-holder .mfp-content, .mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; }
.mfp-ajax-cur { cursor: progress; }
.mfp-zoom-out-cur, .mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: zoom-out; }
.mfp-zoom { cursor: zoom-in; }
.mfp-auto-cursor .mfp-content { cursor: auto; }
.mfp-close, .mfp-arrow, .mfp-preloader, .mfp-counter { -webkit-user-select: none; user-select: none; }
.mfp-loading.mfp-figure { display: none; }
.mfp-hide { display: none !important; }
.mfp-preloader { color: #ccc; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; }
.mfp-preloader a { color: #ccc; }
.mfp-preloader a:hover { color: #fff; }
.mfp-s-ready .mfp-preloader { display: none; }
.mfp-s-error .mfp-content { display: none; }
button.mfp-close, button.mfp-arrow {
  overflow: visible;
  cursor: pointer;
  background: transparent;
  border: 0;
  -webkit-appearance: none;
  display: block;
  outline: none;
  padding: 0;
  z-index: 1046;
  box-shadow: none;
  touch-action: manipulation;
}
button::-moz-focus-inner { padding: 0; border: 0; }
.mfp-close {
  width: 44px;
  height: 44px;
  line-height: 44px;
  position: absolute;
  right: 0;
  top: 0;
  text-decoration: none;
  text-align: center;
  opacity: 0.65;
  padding: 0 0 18px 10px;
  color: #fff;
  font-style: normal;
  font-size: 28px;
  font-family: Arial, Baskerville, monospace;
}
.mfp-close:hover, .mfp-close:focus { opacity: 1; }
.mfp-close:active { top: 1px; }
.mfp-close-btn-in .mfp-close { color: #333; }
.mfp-image-holder .mfp-close, .mfp-iframe-holder .mfp-close { color: #fff; right: -6px; text-align: right; padding-right: 6px; width: 100%; }
.mfp-counter { position: absolute; top: 0; right: 0; color: #ccc; font-size: 12px; line-height: 18px; white-space: nowrap; }
.mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: transparent; }
.mfp-arrow:active { margin-top: -54px; }
.mfp-arrow:hover, .mfp-arrow:focus { opacity: 1; }
.mfp-arrow:before, .mfp-arrow:after {
  content: '';
  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  margin-top: 35px;
  margin-left: 35px;
  border: medium inset transparent;
}
.mfp-arrow:after { border-top-width: 13px; border-bottom-width: 13px; top: 8px; }
.mfp-arrow:before { border-top-width: 21px; border-bottom-width: 21px; opacity: 0.7; }
.mfp-arrow-left { left: 0; }
.mfp-arrow-left:after { border-right: 17px solid #fff; margin-left: 31px; }
.mfp-arrow-left:before { margin-left: 25px; border-right: 27px solid #3f3f3f; }
.mfp-arrow-right { right: 0; }
.mfp-arrow-right:after { border-left: 17px solid #fff; margin-left: 39px; }
.mfp-arrow-right:before { border-left: 27px solid #3f3f3f; }
.mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; }
.mfp-iframe-holder .mfp-close { top: -40px; }
.mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; }
.mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #000; }
img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; }
.mfp-figure { line-height: 0; }
.mfp-figure:after {
  content: '';
  position: absolute;
  left: 0;
  top: 40px;
  bottom: 40px;
  display: block;
  right: 0;
  width: auto;
  height: auto;
  z-index: -1;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
  background: #444;
}
.mfp-figure small { color: #bdbdbd; display: block; font-size: 12px; line-height: 14px; }
.mfp-figure figure { margin: 0; }
.mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; }
.mfp-title { text-align: left; line-height: 18px; color: #f3f3f3; word-wrap: break-word; padding-right: 36px; }
.mfp-image-holder .mfp-content { max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; }

@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) {
  .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; }
  .mfp-img-mobile img.mfp-img { padding: 0; }
  .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; }
  .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; }
  .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; box-sizing: border-box; }
  .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; }
  .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; }
  .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; }
}
@media all and (max-width: 900px) {
  .mfp-arrow { transform: scale(0.75); }
  .mfp-arrow-left { transform-origin: 0; }
  .mfp-arrow-right { transform-origin: 100%; }
  .mfp-container { padding-left: 6px; padding-right: 6px; }
}

/* --- Produktherkünfte: Weltkarte, Hashtags, Popups ------------------------- */
ul.regions__slider__nav { text-align: center; font-size: 0; max-width: 760px; margin: 0 auto; }
ul.regions__slider__nav li {
  display: inline-block;
  vertical-align: middle;
  padding: 5px 15px;
  color: rgba(63, 49, 43, 0.7);
  cursor: pointer;
}   /* Schrift/Größe: siehe Redesign (Charlotte) */
ul.regions__slider__nav li a { text-decoration: none; color: rgba(63, 49, 43, 0.7); }
ul.regions__slider__nav li a:hover,
ul.regions__slider__nav li:hover { color: #3f312b; }
ul.regions__slider__nav li.active,
ul.regions__slider__nav li.active a { color: #02468d; }

.regions__slider__container { margin-bottom: 50px; }
.regions__slider__container .slick-slide img { width: 100%; max-width: 100%; height: auto; }
.regions__slider__desc, .products__slider__desc { display: none; }
.regions__slider__desc.box1, .products__slider__desc.box1 { display: block; }

.products__slider .slick-slide, .products__slider_two .slick-slide { text-align: center; }
.products__slider .slick-slide img, .products__slider_two .slick-slide img {
  width: 60%;
  height: auto;
  margin: 75px auto 0;
  opacity: 0.5;
  transition: all 0.2s ease-in-out;
}
.products__slider .slick-slide.slick-center img, .products__slider_two .slick-slide.slick-center img { width: 100%; opacity: 1; margin-top: 0; }

.regions__overlay { width: 960px; background: #fff url('../img/pattern.jpg'); }
.regions__overlay .regions__overlay__head {
  position: relative;
  height: 350px;
  background-color: #3f312b;
  color: #fff;
  background-size: contain;
  background-repeat: no-repeat;
}
.regions__overlay .regions__overlay__head .category {
  position: absolute;
  height: 100%;
  display: flex;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.58);
  width: 30%;
}
.regions__overlay .regions__overlay__head .category ul { margin: 0; padding: 15px; list-style: none; text-align: left; position: relative; }
.regions__overlay .regions__overlay__head .category ul::before {
  content: '';
  position: absolute;
  height: calc(100% - 15px - 22.5px);
  width: 2px;
  background: #02468d;
  left: 15px;
  top: 0;
}
.regions__overlay .regions__overlay__head .category ul li { padding: 10px 0 10px 60px; color: #02468d; position: relative; }
.regions__overlay .regions__overlay__head .category ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 2px;
  width: 10px;
  background: #02468d;
}
.regions__overlay .regions__overlay__head .category ul li::after {
  content: '';
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  background-size: contain;
  display: inline-block;
  width: 28px;
  height: 28px;
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
}
.regions__overlay .regions__overlay__head .category ul li.nature::after      { background-image: url('../bilder/engagement/icons/nature.png'); }
.regions__overlay .regions__overlay__head .category ul li.campaign::after    { background-image: url('../bilder/engagement/icons/campaign.png'); }
.regions__overlay .regions__overlay__head .category ul li.kids::after        { background-image: url('../bilder/engagement/icons/kids.png'); }
.regions__overlay .regions__overlay__head .category ul li.local::after       { background-image: url('../bilder/engagement/icons/local.png'); }
.regions__overlay .regions__overlay__head .category ul li.world::after       { background-image: url('../bilder/engagement/icons/world.png'); }
.regions__overlay .regions__overlay__head .category ul li.handshake::after   { background-image: url('../bilder/engagement/icons/handshake.png'); }
.regions__overlay .regions__overlay__head .category ul li.sponsoring::after  { background-image: url('../bilder/engagement/icons/sponsoring.png'); }
.regions__overlay .regions__overlay__head .category ul li.money::after       { background-image: url('../bilder/engagement/icons/money.png'); }
.regions__overlay .regions__overlay__head .category ul li.corporate::after   { background-image: url('../bilder/engagement/icons/piktogramm_corporate_giving.png'); }
.regions__overlay .regions__overlay__head .category ul li.spende::after      { background-image: url('../bilder/engagement/icons/piktogramm_Spende.png'); }
.regions__overlay .regions__overlay__head .category ul li.corporatev::after  { background-image: url('../bilder/engagement/icons/piktogramm_CorporateVolunteering.png'); }
.regions__overlay .regions__overlay__head .category ul li.kooperation::after { background-image: url('../bilder/engagement/icons/piktogramm_Kooperation.png'); }
.regions__overlay .regions__overlay__head .category ul li.sponsoring2::after { background-image: url('../bilder/engagement/icons/piktogramm_Sponsoring(Lesepatenschaft).png'); }
.regions__overlay .regions__overlay__head .category ul li.international::after { background-image: url('../bilder/engagement/icons/piktogramm_international.png'); }
.regions__overlay .regions__overlay__head .nut { display: none; }   /* gezeichnete Nüsse entfernt (Briefing) */
.regions__overlay .regions__overlay__content { padding: 50px 0; }
.regions__overlay .regions__overlay__content .w50,
.regions__overlay .regions__overlay__content .w100 { padding: 55px; }
.regions__overlay .regions__overlay__content .w50.posLeft { padding-left: 50px; }
.regions__overlay .regions__overlay__content .w50.posRight { padding-right: 50px; }

/* Doppelrahmen-Button (Popup schließen, nach oben) */
.regions__overlay button.mfp-close {
  color: #fff;
  outline: none;
  position: absolute;
  top: 30px;
  right: 30px;
  width: 32px;
  height: 32px;
  line-height: 33px;
  font-size: 20px;
}
.regions__overlay button.mfp-close:after, .regions__overlay button.mfp-close:before,
footer .toTop:after, footer .toTop:before {
  content: '';
  position: absolute;
  transition: transform 0.2s ease-in-out;
  transform: rotate(-45deg);
}
.regions__overlay button.mfp-close:after, footer .toTop:after { border: 2px solid #fff; top: 0; left: 0; right: 0; bottom: 0; }
.regions__overlay button.mfp-close:before, footer .toTop:before { border: 1px solid #fff; top: 5px; left: 5px; right: 5px; bottom: 5px; }
.regions__overlay button.mfp-close:hover:after, .regions__overlay button.mfp-close:hover:before,
footer .toTop:hover:after, footer .toTop:hover:before { transform: rotate(-135deg); }

@media screen and (max-width: 1000px) {
  .regions__overlay { width: 100%; }
}
@media screen and (max-width: 720px) {
  .regions__overlay .regions__overlay__content { padding: 20px; }
  .regions__overlay .w50 { display: block; width: 100%; padding: 20px !important; }
}
@media screen and (max-width: 650px) {
  .regions__overlay .regions__overlay__head .category { height: auto; width: 100%; }
  .regions__overlay .regions__overlay__head .headline { transform: translateY(60px); }
}

/* --- Konsumtrends (Hintergrund) -------------------------------------------- */
.bg-overlay { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background: rgba(63, 49, 43, 0.8); z-index: 10; }
.bg-vorteile { background-image: url('../bilder/startseite/startseite_bg_vorteile.jpg'); background-size: cover; position: relative; }
.bg-vorteile i { font-size: 130px; }
.bg-vorteile i.icon-zeit { position: relative; right: -7px; }
.bg-vorteile .inner { position: relative; z-index: 20; }

/* --- Nuss-Slider (Startseite, bleibt laut Kunde) --------------------------- */
@keyframes slideInRight { 0% { opacity: 0; left: 100%; } 30% { opacity: 1; } 100% { left: 50%; } }
@keyframes slideInLeft  { 0% { opacity: 0; left: 0; }    30% { opacity: 1; } 100% { left: 50%; } }
@keyframes textSlideIn  { 0% { transform: translateX(400px); opacity: 0; } 50% { opacity: 1; } 100% { transform: translateX(0); } }

.tb-wrap { display: table; width: 100%; height: 100%; }
.tb-wrap .tbc-wrap { display: table-cell; vertical-align: middle; }

.ingredients__slider { padding: 40px 0; }
.ingredients__slider .slide { height: 300px; position: relative; }
.ingredients__slider .slide.animation .slide-bg-0 { animation-name: slideInRight; animation-duration: 1.3s; animation-timing-function: ease-in-out; }
.ingredients__slider .slide.animation .slide-bg-1 { animation-name: slideInLeft;  animation-duration: 1.2s; animation-timing-function: ease-in-out; }
.ingredients__slider .slide.animation h4          { animation-name: textSlideIn;  animation-duration: 1s;   animation-timing-function: ease-in-out; }
.ingredients__slider h4 {
  font-size: 100px;
  text-transform: uppercase;
  margin: 0;
  line-height: 1;
  position: relative;
  z-index: 20;
  transform: translateX(0);
}
.ingredients__slider .slide-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  -webkit-user-select: none;
  user-select: none;
}
.ingredients__slider .slick-prev:before, .ingredients__slider .slick-next:before { color: #fff; }
.ingredients__slider .slick-dots li button { background-color: transparent; }
.ingredients__slider .slick-dots li.slick-active button { background-color: #3f312b; border-color: #3f312b; }
.ingredients__slider .slide-hasel .slide-bg-0      { margin-left: -257px; margin-top: -94px;  z-index: 10; }
.ingredients__slider .slide-hasel .slide-bg-1      { margin-left: -178px; margin-top: -130px; z-index: 30; }
.ingredients__slider .slide-cash .slide-bg-0       { margin-left: -140px; margin-top: -94px;  z-index: 10; }
.ingredients__slider .slide-cash .slide-bg-1       { margin-left: -228px; margin-top: -90px;  z-index: 30; }
.ingredients__slider .slide-mandel .slide-bg-0     { margin-left: -188px; margin-top: -94px;  z-index: 10; }
.ingredients__slider .slide-mandel .slide-bg-1     { margin-left: -94px;  margin-top: -90px;  z-index: 30; }
.ingredients__slider .slide-cranberrie .slide-bg-0 { margin-left: -309px; margin-top: -114px; z-index: 10; }
.ingredients__slider .slide-cranberrie .slide-bg-1 { margin-left: -115px; margin-top: -90px;  z-index: 30; }

@media screen and (max-width: 880px) {
  .ingredients__slider .slide.animation .slide-bg-0,
  .ingredients__slider .slide.animation .slide-bg-1,
  .ingredients__slider .slide.animation h4 { animation: none; }
}
@media screen and (max-width: 720px) {
  .ingredients__slider .slide { height: auto; }
  .ingredients__slider h4 { font-size: 80px; }
  .ingredients__slider .slide-bg { display: none; }
}
@media screen and (max-width: 580px) {
  .ingredients__slider .slick-dots { bottom: -55px; }
  .ingredients__slider .slide h4 { font-size: 50px; }
}

/* --- Kontaktformular ------------------------------------------------------- */
.contactform { border: 0 none; position: relative; }
.contactform .hidden { display: none; }
.contactform .inner { font-size: 0; min-height: 240px; }
.contactform .fieldrow { padding: 5px; font-size: 18px; }
.contactform .fieldrow.w50 { display: inline-block; vertical-align: top; }
.contactform .field {
  display: block;
  width: 100%;
  border: 1px solid #9c8e84;
  border-bottom-width: 3px;
  background-color: #9c8e84;
  padding: 10px;
  color: #fff;
  outline: none;
  transition: border 0.2s ease-in-out;
}
.contactform .field.error { border-color: #a71111; background-color: rgba(167, 17, 17, 0.6); }
.contactform .field:focus { border-color: #3f312b; border-bottom-color: #3f312b; background-color: #9c8e84; }
.contactform textarea.field { height: 140px; }
.contactform .success {
  display: none;
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 107%;
  border: 3px solid #3f312b;
  font-size: 18px;
  text-align: center;
  padding: 5px;
  min-height: 240px;
}
.contactform .success > div { border: 1px solid #3f312b; }
.contactform .success h5 { margin-top: 0; }
.contactform .success p { max-width: 80%; margin: 0 auto; }
@media screen and (max-width: 760px) {
  .contactform .inner { padding: 0; }
}
@media screen and (max-width: 720px) {
  .contactform .fieldrow { padding: 5px 0; }
}

/* --- Leistungen: Icon-Band ------------------------------------------------- */
.leistungen__slider { width: 100%; }
.leistungen__slider .leistungen__slider_nav {
  margin-bottom: var(--nw-section-space);
  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.1) 0%, transparent 100%);
  padding: 60px 0;
  position: relative;
  height: 440px;
}
.leistungen__slider .leistungen__slider_nav:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  margin-top: -5px;
  width: 100%;
  height: 4px;
  border: 4px dashed rgba(63, 49, 43, 0.5);
  border-width: 0 0 2px 0;
  display: block;
  z-index: -1;
}
.leistungen__slider .slider__nav__element { padding: 10px; cursor: pointer; margin-top: 50px; transition: all 0.2s ease-in-out; }
.leistungen__slider .slider__nav__element .circle {
  border-radius: 100%;
  width: 200px;
  height: 200px;
  padding: 50px;
  margin: 0 auto;
  background: #f5f5f5 url('../img/pattern.jpg');
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
  transition: all 0.2s ease-in-out;
}
.leistungen__slider .slider__nav__element .circle img { max-width: 100%; max-height: 100%; width: auto; height: auto; margin: 0 auto; line-height: 200px; }
.leistungen__slider .leistungen__slider_navfor { max-width: 960px; padding: 0 20px; margin: 0 auto var(--nw-section-space); }
.leistungen__slider .leistungen__slider_navfor .slider_navfor_element { text-align: center; }
.leistungen__slider .leistungen__slider_navfor .slider_navfor_element h4 { text-align: center; margin-top: 0; }
.leistungen__slider__inside { max-width: 1200px; margin: 0 auto; padding: 120px 0; }
.slider__nav__element.slick-center { opacity: 1; margin-top: 0; }
.slider__nav__element.slick-center .circle { width: 300px; height: 300px; }

ul.seals { list-style: none; text-align: center; margin: 0; padding: 0; }
ul.seals li { display: inline-block; vertical-align: top; padding: 0 5px; }
ul.seals li img { margin-bottom: 5px; display: inline; }

@media screen and (max-width: 1060px) {
  .slider__nav__element.slick-center { margin-top: 50px; }
  .slider__nav__element.slick-center .circle { width: 200px; height: 200px; }
}
@media screen and (max-width: 770px) {
  .slider__nav__element { margin-top: 0 !important; }
  .slider__nav__element .circle { width: 200px; height: 200px; }
  .leistungen__slider .leistungen__slider_nav { padding: 15px 0; height: 250px; }
  ul.seals li { display: block; text-align: center; margin-bottom: 10px; }
}

/* --- Verpackungen ---------------------------------------------------------- */
.packaging { padding: 50px 0; }
.packaging .table__container { height: auto; vertical-align: middle; }
.packaging .w50 { overflow: hidden; }
.packaging .w50 > img { position: relative; }
@media screen and (max-width: 980px) {
  .packaging .w50 { overflow: auto; }
  .packaging .w50 > img { position: static; }
}

/* --- Footer ---------------------------------------------------------------- */
footer { background-color: #3f312b; color: #9c8e84; padding: 50px 0 70px; }
footer h5, footer strong { color: #fff; }
footer h5 { margin-top: 0; }
footer a { color: #9c8e84; text-decoration: none; }
footer .bottomrow { margin-top: 40px; font-size: 16px; position: relative; }
footer .bottomrow a { margin-right: 20px; }
footer .bottomrow a:hover { color: #fff; }
footer .linkedin .linkedin-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  background-image: url('../img/LinkedIn_white.svg');
  background-position: center center;
  background-size: 20px 20px;
  background-repeat: no-repeat;
  vertical-align: middle;
}
footer a.linkedin { width: 20px; height: 20px; background-color: #3f312b; border-radius: 3px; margin-right: 10px; }
footer .toTop {
  position: absolute;
  top: 0;
  left: 50%;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  line-height: 40px;
  font-size: 13px;
  text-align: center;
}   /* Doppelrahmen: siehe "Doppelrahmen-Button" oben */
.nachhaltigkeits-logos-footer > li { max-width: 100px; margin-left: 5px; }
.nachhaltigkeits-logos-footer > li > img { width: auto !important; max-height: 100px !important; }

@media screen and (max-width: 900px) {
  footer .block__container .w50 { width: 100%; }
}
@media screen and (max-width: 768px) {
  footer { padding: 20px 10px; }
  footer p { max-width: none; }
  footer .table__container { font-size: 0; }
  footer .table__container > div { font-size: 18px; display: inline-block; vertical-align: top; height: auto; }
  footer .bottomrow { padding-bottom: 60px; }
  footer .bottomrow .w50 { font-size: 0; text-align: center; width: 100%; }
  footer .bottomrow .w50.align__right { text-align: left; font-size: 16px; line-height: 40px; }
  footer .bottomrow .w50 a {
    display: inline-block;
    vertical-align: middle;
    border: 1px solid #4e3d35;
    width: 33.333333%;
    font-size: 16px;
    margin-right: 0;
    padding: 10px;
  }
  footer .bottomrow .w50 a.linkedin { padding: initial; border: initial; width: 20px; margin-right: 10px; vertical-align: initial; display: inline-block; }
  footer .toTop { top: auto; bottom: 20px; right: 0; left: auto; }
}
@media screen and (max-width: 500px) {
  footer .bottomrow .w50 a { display: block; width: 100%; margin-top: -1px; }
  footer .bottomrow .w50.align__right { text-align: center; }
  footer .toTop { left: 50%; }
  footer .bottomrow { padding-bottom: 80px; }
  .compass-box { padding: 0; border: none; }
  .compass-box .underline { margin-bottom: 50px; }
}

/* --- Gezeichnete Nüsse (nur noch in alten Popups, dort ausgeblendet) ------- */
.nut { display: inline-block; margin-bottom: 15px; }
.nut.haselnuss { background: transparent url('../bilder/haselnuss.png') left top; width: 70px; height: 77px; }
.nut.haselnuss-white { background: transparent url('../bilder/haselnuss_white.png') left top; width: 70px; height: 64px; }
.nut.haselnuss-white-shadow { background: transparent url('../bilder/haselnuss_white_shadow.png') left top; width: 75px; height: 70px; }
.nut.haselnuss-white2 { background: transparent url('../bilder/haselnuss_white2.png') left top; width: 70px; height: 77px; }
.nut.mandel { background: transparent url('../bilder/mandel.png') left top; width: 70px; height: 65px; }
.nut.mandel-white { background: transparent url('../bilder/mandel_white.png') left top; width: 71px; height: 54px; }
.nut.walnuss { background: transparent url('../bilder/walnuss.png') left top; width: 70px; height: 66px; }
.nut.walnuss-white { background: transparent url('../bilder/walnuss-white.png') left top; width: 70px; height: 66px; }
.nut.aprikose { background: transparent url('../bilder/aprikose_blue.png') left top; width: 70px; height: 59px; }
.nut.macadamia { background: transparent url('../bilder/macadamia.png') left top; width: 70px; height: 64px; }
.nut.pistazie { background: transparent url('../bilder/pistazie.png') left top; width: 70px; height: 77px; }
.nut.apfeltrocken { background: transparent url('../bilder/apfeltrocken.png') left top; width: 70px; height: 40px; }

/* --- Agentur-Info (Impressum) ---------------------------------------------- */
.siteway { max-width: 1300px; }
.siteway .agencyInfo { border: 1px solid #f0f0f0; line-height: 1.4em; margin-bottom: 2px; }
.siteway .agencyInfo p { margin: 0 0 15px; clear: left; }
.siteway .agencyInfo p img { float: left; clear: left; margin-right: 15px; margin-bottom: 15px; }
.siteway .agencyInfo h2 { font-size: 14px; padding: 15px; cursor: pointer; margin: 0; }
.siteway .agencyInfo .siteway-content { padding: 15px; }
.siteway .agencyInfo .siteway-content::after { clear: both; content: ''; display: block; }
.siteway .agencyInfo .siteway-content .siteway-col { width: 250px; display: table-cell; margin: 0; padding: 15px; vertical-align: middle; }
.siteway .agencyInfo adress strong { width: 30%; display: inline-block; }
.siteway .agencyInfo adress span { width: 70%; display: inline-block; }
.siteway .agencyInfo.open, .siteway .agencyInfo:hover { border: 1px solid #77ac3c; }
.siteway .agencyInfo.open h2, .siteway .agencyInfo:hover h2 { background: #77ac3c; color: #fff; }
.siteway .agencyInfo ul li::marker { content: none !important; }
@media (max-width: 750px) {
  .siteway .agencyInfo .siteway-content .siteway-col { width: 100%; display: block; }
}

/* --- animate.css 3.5.1 (MIT, Daniel Eden) – ohne Vendor-Präfixe ------------
   slideInLeft/slideInRight werden vom Nuss-Slider oben neu definiert.     */
.animated { animation-duration: 1s; animation-fill-mode: both; }
.animated.infinite { animation-iteration-count: infinite; }
.animated.hinge { animation-duration: 2s; }
.animated.flipOutX, .animated.flipOutY, .animated.bounceIn, .animated.bounceOut { animation-duration: 0.75s; }

@keyframes bounce {
  from, 20%, 53%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); transform: translate3d(0, 0, 0); }
  40%, 43% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -30px, 0); }
  70% { animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); transform: translate3d(0, -15px, 0); }
  90% { transform: translate3d(0, -4px, 0); }
}
.bounce { animation-name: bounce; transform-origin: center bottom; }
@keyframes flash { from, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } }
.flash { animation-name: flash; }
@keyframes pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.05, 1.05, 1.05); } to { transform: scale3d(1, 1, 1); } }
.pulse { animation-name: pulse; }
@keyframes rubberBand {
  from { transform: scale3d(1, 1, 1); }
  30% { transform: scale3d(1.25, 0.75, 1); }
  40% { transform: scale3d(0.75, 1.25, 1); }
  50% { transform: scale3d(1.15, 0.85, 1); }
  65% { transform: scale3d(0.95, 1.05, 1); }
  75% { transform: scale3d(1.05, 0.95, 1); }
  to { transform: scale3d(1, 1, 1); }
}
.rubberBand { animation-name: rubberBand; }
@keyframes shake {
  from, to { transform: translate3d(0, 0, 0); }
  10%, 30%, 50%, 70%, 90% { transform: translate3d(-10px, 0, 0); }
  20%, 40%, 60%, 80% { transform: translate3d(10px, 0, 0); }
}
.shake { animation-name: shake; }
@keyframes headShake {
  0% { transform: translateX(0); }
  6.5% { transform: translateX(-6px) rotateY(-9deg); }
  18.5% { transform: translateX(5px) rotateY(7deg); }
  31.5% { transform: translateX(-3px) rotateY(-5deg); }
  43.5% { transform: translateX(2px) rotateY(3deg); }
  50% { transform: translateX(0); }
}
.headShake { animation-timing-function: ease-in-out; animation-name: headShake; }
@keyframes swing {
  20% { transform: rotate3d(0, 0, 1, 15deg); }
  40% { transform: rotate3d(0, 0, 1, -10deg); }
  60% { transform: rotate3d(0, 0, 1, 5deg); }
  80% { transform: rotate3d(0, 0, 1, -5deg); }
  to { transform: rotate3d(0, 0, 1, 0deg); }
}
.swing { transform-origin: top center; animation-name: swing; }
@keyframes tada {
  from { transform: scale3d(1, 1, 1); }
  10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
  30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
  40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
  to { transform: scale3d(1, 1, 1); }
}
.tada { animation-name: tada; }
@keyframes wobble {
  from { transform: none; }
  15% { transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg); }
  30% { transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg); }
  45% { transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg); }
  60% { transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg); }
  75% { transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg); }
  to { transform: none; }
}
.wobble { animation-name: wobble; }
@keyframes jello {
  from, 11.1%, to { transform: none; }
  22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
  33.3% { transform: skewX(6.25deg) skewY(6.25deg); }
  44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
  55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
  66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
  77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
  88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}
.jello { animation-name: jello; transform-origin: center; }

@keyframes bounceIn {
  from, 20%, 40%, 60%, 80%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
  20% { transform: scale3d(1.1, 1.1, 1.1); }
  40% { transform: scale3d(0.9, 0.9, 0.9); }
  60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
  80% { transform: scale3d(0.97, 0.97, 0.97); }
  to { opacity: 1; transform: scale3d(1, 1, 1); }
}
.bounceIn { animation-name: bounceIn; }
@keyframes bounceInDown {
  from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: translate3d(0, -3000px, 0); }
  60% { opacity: 1; transform: translate3d(0, 25px, 0); }
  75% { transform: translate3d(0, -10px, 0); }
  90% { transform: translate3d(0, 5px, 0); }
  to { transform: none; }
}
.bounceInDown { animation-name: bounceInDown; }
@keyframes bounceInLeft {
  from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  0% { opacity: 0; transform: translate3d(-3000px, 0, 0); }
  60% { opacity: 1; transform: translate3d(25px, 0, 0); }
  75% { transform: translate3d(-10px, 0, 0); }
  90% { transform: translate3d(5px, 0, 0); }
  to { transform: none; }
}
.bounceInLeft { animation-name: bounceInLeft; }
@keyframes bounceInRight {
  from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from { opacity: 0; transform: translate3d(3000px, 0, 0); }
  60% { opacity: 1; transform: translate3d(-25px, 0, 0); }
  75% { transform: translate3d(10px, 0, 0); }
  90% { transform: translate3d(-5px, 0, 0); }
  to { transform: none; }
}
.bounceInRight { animation-name: bounceInRight; }
@keyframes bounceInUp {
  from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); }
  from { opacity: 0; transform: translate3d(0, 3000px, 0); }
  60% { opacity: 1; transform: translate3d(0, -20px, 0); }
  75% { transform: translate3d(0, 10px, 0); }
  90% { transform: translate3d(0, -5px, 0); }
  to { transform: translate3d(0, 0, 0); }
}
.bounceInUp { animation-name: bounceInUp; }
@keyframes bounceOut {
  20% { transform: scale3d(0.9, 0.9, 0.9); }
  50%, 55% { opacity: 1; transform: scale3d(1.1, 1.1, 1.1); }
  to { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
}
.bounceOut { animation-name: bounceOut; }
@keyframes bounceOutDown {
  20% { transform: translate3d(0, 10px, 0); }
  40%, 45% { opacity: 1; transform: translate3d(0, -20px, 0); }
  to { opacity: 0; transform: translate3d(0, 2000px, 0); }
}
.bounceOutDown { animation-name: bounceOutDown; }
@keyframes bounceOutLeft { 20% { opacity: 1; transform: translate3d(20px, 0, 0); } to { opacity: 0; transform: translate3d(-2000px, 0, 0); } }
.bounceOutLeft { animation-name: bounceOutLeft; }
@keyframes bounceOutRight { 20% { opacity: 1; transform: translate3d(-20px, 0, 0); } to { opacity: 0; transform: translate3d(2000px, 0, 0); } }
.bounceOutRight { animation-name: bounceOutRight; }
@keyframes bounceOutUp {
  20% { transform: translate3d(0, -10px, 0); }
  40%, 45% { opacity: 1; transform: translate3d(0, 20px, 0); }
  to { opacity: 0; transform: translate3d(0, -2000px, 0); }
}
.bounceOutUp { animation-name: bounceOutUp; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.fadeIn { animation-name: fadeIn; }
@keyframes fadeInDown { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } }
.fadeInDown { animation-name: fadeInDown; }
@keyframes fadeInDownBig { from { opacity: 0; transform: translate3d(0, -2000px, 0); } to { opacity: 1; transform: none; } }
.fadeInDownBig { animation-name: fadeInDownBig; }
@keyframes fadeInLeft { from { opacity: 0; transform: translate3d(-100%, 0, 0); } to { opacity: 1; transform: none; } }
.fadeInLeft { animation-name: fadeInLeft; }
@keyframes fadeInLeftBig { from { opacity: 0; transform: translate3d(-2000px, 0, 0); } to { opacity: 1; transform: none; } }
.fadeInLeftBig { animation-name: fadeInLeftBig; }
@keyframes fadeInRight { from { opacity: 0; transform: translate3d(100%, 0, 0); } to { opacity: 1; transform: none; } }
.fadeInRight { animation-name: fadeInRight; }
@keyframes fadeInRightBig { from { opacity: 0; transform: translate3d(2000px, 0, 0); } to { opacity: 1; transform: none; } }
.fadeInRightBig { animation-name: fadeInRightBig; }
@keyframes fadeInUp { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: none; } }
.fadeInUp { animation-name: fadeInUp; }
@keyframes fadeInUpBig { from { opacity: 0; transform: translate3d(0, 2000px, 0); } to { opacity: 1; transform: none; } }
.fadeInUpBig { animation-name: fadeInUpBig; }
@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
.fadeOut { animation-name: fadeOut; }
@keyframes fadeOutDown { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, 100%, 0); } }
.fadeOutDown { animation-name: fadeOutDown; }
@keyframes fadeOutDownBig { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, 2000px, 0); } }
.fadeOutDownBig { animation-name: fadeOutDownBig; }
@keyframes fadeOutLeft { from { opacity: 1; } to { opacity: 0; transform: translate3d(-100%, 0, 0); } }
.fadeOutLeft { animation-name: fadeOutLeft; }
@keyframes fadeOutLeftBig { from { opacity: 1; } to { opacity: 0; transform: translate3d(-2000px, 0, 0); } }
.fadeOutLeftBig { animation-name: fadeOutLeftBig; }
@keyframes fadeOutRight { from { opacity: 1; } to { opacity: 0; transform: translate3d(100%, 0, 0); } }
.fadeOutRight { animation-name: fadeOutRight; }
@keyframes fadeOutRightBig { from { opacity: 1; } to { opacity: 0; transform: translate3d(2000px, 0, 0); } }
.fadeOutRightBig { animation-name: fadeOutRightBig; }
@keyframes fadeOutUp { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, -100%, 0); } }
.fadeOutUp { animation-name: fadeOutUp; }
@keyframes fadeOutUpBig { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, -2000px, 0); } }
.fadeOutUpBig { animation-name: fadeOutUpBig; }

@keyframes flip {
  from { transform: perspective(400px) rotate3d(0, 1, 0, -360deg); animation-timing-function: ease-out; }
  40% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg); animation-timing-function: ease-out; }
  50% { transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg); animation-timing-function: ease-in; }
  80% { transform: perspective(400px) scale3d(0.95, 0.95, 0.95); animation-timing-function: ease-in; }
  to { transform: perspective(400px); animation-timing-function: ease-in; }
}
.animated.flip { backface-visibility: visible; animation-name: flip; }
@keyframes flipInX {
  from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; }
  40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; }
  60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; }
  80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); }
  to { transform: perspective(400px); }
}
.flipInX { backface-visibility: visible !important; animation-name: flipInX; }
@keyframes flipInY {
  from { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); animation-timing-function: ease-in; opacity: 0; }
  40% { transform: perspective(400px) rotate3d(0, 1, 0, -20deg); animation-timing-function: ease-in; }
  60% { transform: perspective(400px) rotate3d(0, 1, 0, 10deg); opacity: 1; }
  80% { transform: perspective(400px) rotate3d(0, 1, 0, -5deg); }
  to { transform: perspective(400px); }
}
.flipInY { backface-visibility: visible !important; animation-name: flipInY; }
@keyframes flipOutX {
  from { transform: perspective(400px); }
  30% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); opacity: 1; }
  to { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); opacity: 0; }
}
.flipOutX { animation-name: flipOutX; backface-visibility: visible !important; }
@keyframes flipOutY {
  from { transform: perspective(400px); }
  30% { transform: perspective(400px) rotate3d(0, 1, 0, -15deg); opacity: 1; }
  to { transform: perspective(400px) rotate3d(0, 1, 0, 90deg); opacity: 0; }
}
.flipOutY { backface-visibility: visible !important; animation-name: flipOutY; }

@keyframes lightSpeedIn {
  from { transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; }
  60% { transform: skewX(20deg); opacity: 1; }
  80% { transform: skewX(-5deg); opacity: 1; }
  to { transform: none; opacity: 1; }
}
.lightSpeedIn { animation-name: lightSpeedIn; animation-timing-function: ease-out; }
@keyframes lightSpeedOut { from { opacity: 1; } to { transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } }
.lightSpeedOut { animation-name: lightSpeedOut; animation-timing-function: ease-in; }

@keyframes rotateIn { from { transform-origin: center; transform: rotate3d(0, 0, 1, -200deg); opacity: 0; } to { transform-origin: center; transform: none; opacity: 1; } }
.rotateIn { animation-name: rotateIn; }
@keyframes rotateInDownLeft { from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } to { transform-origin: left bottom; transform: none; opacity: 1; } }
.rotateInDownLeft { animation-name: rotateInDownLeft; }
@keyframes rotateInDownRight { from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { transform-origin: right bottom; transform: none; opacity: 1; } }
.rotateInDownRight { animation-name: rotateInDownRight; }
@keyframes rotateInUpLeft { from { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } to { transform-origin: left bottom; transform: none; opacity: 1; } }
.rotateInUpLeft { animation-name: rotateInUpLeft; }
@keyframes rotateInUpRight { from { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -90deg); opacity: 0; } to { transform-origin: right bottom; transform: none; opacity: 1; } }
.rotateInUpRight { animation-name: rotateInUpRight; }
@keyframes rotateOut { from { transform-origin: center; opacity: 1; } to { transform-origin: center; transform: rotate3d(0, 0, 1, 200deg); opacity: 0; } }
.rotateOut { animation-name: rotateOut; }
@keyframes rotateOutDownLeft { from { transform-origin: left bottom; opacity: 1; } to { transform-origin: left bottom; transform: rotate3d(0, 0, 1, 45deg); opacity: 0; } }
.rotateOutDownLeft { animation-name: rotateOutDownLeft; }
@keyframes rotateOutDownRight { from { transform-origin: right bottom; opacity: 1; } to { transform-origin: right bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } }
.rotateOutDownRight { animation-name: rotateOutDownRight; }
@keyframes rotateOutUpLeft { from { transform-origin: left bottom; opacity: 1; } to { transform-origin: left bottom; transform: rotate3d(0, 0, 1, -45deg); opacity: 0; } }
.rotateOutUpLeft { animation-name: rotateOutUpLeft; }
@keyframes rotateOutUpRight { from { transform-origin: right bottom; opacity: 1; } to { transform-origin: right bottom; transform: rotate3d(0, 0, 1, 90deg); opacity: 0; } }
.rotateOutUpRight { animation-name: rotateOutUpRight; }

@keyframes hinge {
  0% { transform-origin: top left; animation-timing-function: ease-in-out; }
  20%, 60% { transform: rotate3d(0, 0, 1, 80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
  40%, 80% { transform: rotate3d(0, 0, 1, 60deg); transform-origin: top left; animation-timing-function: ease-in-out; opacity: 1; }
  to { transform: translate3d(0, 700px, 0); opacity: 0; }
}
.hinge { animation-name: hinge; }
@keyframes rollIn { from { opacity: 0; transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg); } to { opacity: 1; transform: none; } }
.rollIn { animation-name: rollIn; }
@keyframes rollOut { from { opacity: 1; } to { opacity: 0; transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg); } }
.rollOut { animation-name: rollOut; }

@keyframes zoomIn { from { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } }
.zoomIn { animation-name: zoomIn; }
@keyframes zoomInDown {
  from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
}
.zoomInDown { animation-name: zoomInDown; }
@keyframes zoomInLeft {
  from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
}
.zoomInLeft { animation-name: zoomInLeft; }
@keyframes zoomInRight {
  from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
}
.zoomInRight { animation-name: zoomInRight; }
@keyframes zoomInUp {
  from { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  60% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
}
.zoomInUp { animation-name: zoomInUp; }
@keyframes zoomOut { from { opacity: 1; } 50% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } }
.zoomOut { animation-name: zoomOut; }
@keyframes zoomOutDown {
  40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
}
.zoomOutDown { animation-name: zoomOutDown; }
@keyframes zoomOutLeft {
  40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
  to { opacity: 0; transform: scale(0.1) translate3d(-2000px, 0, 0); transform-origin: left center; }
}
.zoomOutLeft { animation-name: zoomOutLeft; }
@keyframes zoomOutRight {
  40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
  to { opacity: 0; transform: scale(0.1) translate3d(2000px, 0, 0); transform-origin: right center; }
}
.zoomOutRight { animation-name: zoomOutRight; }
@keyframes zoomOutUp {
  40% { opacity: 1; transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0); animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); }
  to { opacity: 0; transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0); transform-origin: center bottom; animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1); }
}
.zoomOutUp { animation-name: zoomOutUp; }

@keyframes slideInDown { from { transform: translate3d(0, -100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
.slideInDown { animation-name: slideInDown; }
.slideInLeft { animation-name: slideInLeft; }
.slideInRight { animation-name: slideInRight; }
@keyframes slideInUp { from { transform: translate3d(0, 100%, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } }
.slideInUp { animation-name: slideInUp; }
@keyframes slideOutDown { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, 100%, 0); } }
.slideOutDown { animation-name: slideOutDown; }
@keyframes slideOutLeft { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(-100%, 0, 0); } }
.slideOutLeft { animation-name: slideOutLeft; }
@keyframes slideOutRight { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(100%, 0, 0); } }
.slideOutRight { animation-name: slideOutRight; }
@keyframes slideOutUp { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(0, -100%, 0); } }
.slideOutUp { animation-name: slideOutUp; }


/* ==========================================================================
   5  KORREKTURRUNDEN 28.09. – 02.10.
   ========================================================================== */

/* --- A4: Abstände (100px Desktop / 50px mobil, Variablen siehe :root) ------ */
.basic__section,
.engagement .basic__section,
.career .basic__section {
  padding-top: var(--nw-section-space);
  padding-bottom: var(--nw-section-space);
}
/* Unterseiten mit Slider-Hero (z. B. Stellenbörse): Box umschließt das Bild */
body:not(.home) .hero:has(> .basic__slider) { height: auto; }
.about_us .basic__section.aboutus { margin-top: 0; }
.about_us .basic__section.aboutus .inner > .column:first-child { padding-top: 0; }

/* --- A2: Überschriften-Hierarchie ------------------------------------------
   Dachzeile: Charlotte, braun · Hauptzeile: Blau, Versalien               */
.basic__section .inner > .specialFont:first-child,
.basic__section h1.specialFont { margin-top: 0; margin-bottom: 0.3em; }
.basic__section .inner > .specialFont:first-child + h2,
.basic__section h1.specialFont + h2,
.basic__section .inner > h1:first-child,
.basic__section .inner > h2:first-child { margin-top: 0; }
.basic__section h1:not(.specialFont) { font-size: 2em; }
.aboutus .columnclaim h3,
.unternehmensstruktur h3 { font-size: 2em; color: var(--nw-blue); }

/* --- U1: "Fruitwork" im Fließtext immer blau ------------------------------- */
strong.blue.fruitwork,
.fruitwork { color: var(--nw-blue); }

/* --- A3: Heros vereinheitlichen ---------------------------------------------
   Zeile 1 (Seitenname) = .specialFont · Zeile 2 (Claim) = h1/h2.
   Schriftgröße der Zeile 1 kommt aus dem Charlotte-Block (Redesign).       */
.hero .slideitem h1.specialFont {
  margin: 0.5em 0;
  color: #fff;
  text-shadow: 0px 2px 9px black;
}
.hero .slideitem h1:not(.specialFont) {
  font-size: 2em;
  text-transform: uppercase;
  margin: 20px 0 0;
  color: #fff;
  text-shadow: 0px 2px 9px rgba(0, 0, 0, 0.5);
}
@media screen and (max-width: 1200px) {
  .hero .slideitem h1:not(.specialFont) { font-size: 45px; }
}
@media screen and (max-width: 760px) {
  .hero .slideitem h1:not(.specialFont) { font-size: 35px; margin-top: 0; }
  .hero .slideitem h1.specialFont { margin-bottom: 0; }
}
@media screen and (max-width: 630px) {
  .hero .slideitem h1:not(.specialFont) { font-size: 28px; }
}

/* Hero-Bilder leicht abdunkeln, damit weiße Schrift lesbar bleibt */
.hero > .table__container.color__white > .slideitem { position: relative; }
.hero > .table__container.color__white > .slideitem::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  pointer-events: none;
}
.hero > .table__container.color__white > .slideitem > .table__container { position: relative; z-index: 1; }

/* Hero-Zeile 1 mobil einzeilig: unter 540px skaliert die Schrift mit der
   Bildschirmbreite (Budget 12em, abzüglich 60px Seitenabstand). */
@media screen and (max-width: 540px) {
  html body .hero p.specialFont,
  html body .hero h1.specialFont,
  html body .hero .slideitem p.specialFont,
  html body .hero .slideitem h1.specialFont {
    white-space: nowrap;
    font-size: min(var(--nw-script-size-hero), calc((100vw - 60px) / 12));
  }
}

/* --- S1: Produktsicherheit (Startseite) ------------------------------------ */
.produktsicherheit .alw_wrapper h2 { font-size: 2.5em; color: #fff; margin: 0 0 0.2em; }
.produktsicherheit .alw_wrapper h2 + p.specialFont { margin-top: 0; }
/* Logos (EU-Bio, IFS Broker) gleich hoch, Breite aus dem Seitenverhältnis (02.10.) */
.produktsicherheit .images-inline li { vertical-align: middle; padding: 0 8px; }
.produktsicherheit .images-inline li img {
  height: 80px;
  width: auto;
  max-width: none;
  max-height: none;
  margin: 0;
}
@media screen and (max-width: 480px) {
  .produktsicherheit .images-inline li img { height: 64px; }
}

/* --- A7 / U2 / B2: Kachel-Raster, letzte Reihe mittig ---------------------- */
@media screen and (min-width: 861px) {
  .aboutuspillargrid .pillar-grid,
  .benefits .pillar-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .aboutuspillargrid .pillar-grid > .pillar,
  .benefits .pillar-grid > .pillar { grid-column: span 2; }
  .aboutuspillargrid .pillar-grid > .pillar:nth-child(3n+1):nth-last-child(2),
  .benefits .pillar-grid > .pillar:nth-child(3n+1):nth-last-child(2) { grid-column: 2 / span 2; }
  .aboutuspillargrid .pillar-grid > .pillar:nth-child(3n+1):last-child,
  .benefits .pillar-grid > .pillar:nth-child(3n+1):last-child { grid-column: 3 / span 2; }
}
/* U2: Säulen-Titel ist die Überschrift */
.aboutuspillargrid .pillar-grid .pillar > h5,
.benefits .pillar-grid .pillar > h4 { font-size: 22px; line-height: 1.3em; color: var(--nw-blue); }

/* --- N1: Umweltpartner-Logo bei Klimaschutz verkleinern -------------------- */
.career-more img[src*="umwelt-partner-2025"] { height: 300px; width: auto; }

/* --- K2: Facts über dem Mandel-Bild ---------------------------------------- */
.career.facts { display: grid; padding: 0; }
.career.facts > .banner,
.career.facts > .inner { grid-area: 1 / 1; }
.career.facts > .banner { position: relative; width: 100%; margin: 0; min-height: 440px; height: 100%; }
.career.facts > .banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.career.facts > .banner::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); }
.career.facts > .inner {
  position: relative;
  z-index: 1;
  align-self: center;
  width: 100%;
  padding: var(--nw-section-space) 10px;
}
.career.facts h4,
.career.facts .table__container.align__top .w20 h4.pt40,
.career.facts p { color: #fff; }

/* --- W1: "Unsere Werte" (Karriere) ----------------------------------------- */
.karrierebox .column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  column-gap: 40px;
  align-items: start;
  margin-bottom: 40px;
}
.karrierebox .column .columnclaim { margin-top: 0; }
.karrierebox .column .columnclaim:first-child { justify-content: center; }
.karrierebox .value-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: auto;
  height: auto;
  margin: 0;
}
.karrierebox .value-icon h5 { display: flex; margin: 10px 0 0; }
.karrierebox .column .columnclaim p { margin-top: 0; }
.karrierebox table tr th { vertical-align: top; }
.karrierebox table tr th:first-of-type { padding-right: 15px; }
/* drei Brauntöne wie in der Präsentation, Ziffern in der jeweiligen Farbe */
.karrierebox .column:nth-child(1) h5,
.karrierebox .column:nth-child(1) table th:first-of-type { color: #3f312b; }
.karrierebox .column:nth-child(2) h5,
.karrierebox .column:nth-child(2) table th:first-of-type { color: var(--nw-beige-dark); }
.karrierebox .column:nth-child(3) h5,
.karrierebox .column:nth-child(3) table th:first-of-type { color: #9c8e84; }
@media screen and (max-width: 760px) {
  .karrierebox .column { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
}

/* --- C1: Adressen unter den Karten (Kontakt) ------------------------------- */
.map .column { align-items: flex-start; }
.map .column .columnclaim p { margin-top: 30px; margin-bottom: 0; }

/* ==========================================================================
   RUNDE 2: EINHEITLICHE ABSTÄNDE & RESPONSIVE (28.09.)
   ========================================================================== */

/* Erste/letzte Elemente einer Sektion ohne zusätzliche Außenabstände */
.basic__section .inner > :first-child,
.basic__section .inner > .column:first-child > :first-child,
.basic__section .table__container > div > :first-child,
.basic__section .path-outro > :first-child { margin-top: 0; }
.basic__section .inner > :last-child,
.basic__section .table__container > div > :last-child,
.basic__section .inner > .table__container:last-child,
.basic__section .path-outro > :last-child,
.basic__section .pillar-grid:last-child,
.basic__section .karrierebox:last-child,
.basic__section .karrierebox .column:last-child { margin-bottom: 0; padding-bottom: 0; }
.basic__section .inner > .table__container:last-child > div { padding-bottom: 0; }
.basic__section .inner > p:last-child br:last-child { display: none; }

@media screen and (max-width: 760px) {
  .basic__section .inner > .table__container:last-child > div:last-child,
  .basic__section .inner > .table__container.reverse:last-child > div:first-child { margin-bottom: 0; }
  .basic__section .inner > .table__container.reverse:last-child > div:last-child { margin-bottom: 20px; }
}
@media screen and (max-width: 860px) {
  .basic__section .pillar-grid:last-child > .pillar:last-child { padding-bottom: 0; }
}

/* Zwei aufeinanderfolgende Sektionen ohne eigenen Hintergrund: Abstand nicht doppeln */
.basic__section:not([class*="bg__"]):not(.facts):not(.produktsicherheit)
  + .basic__section:not([class*="bg__"]):not(.facts) { padding-top: 0; }
.section-divider + .basic__section:not([class*="bg__"]) { padding-top: calc(var(--nw-section-space) / 2); }

/* --- Überschriften auf kleinen Bildschirmen -------------------------------- */
h1, h2, h3, h4, h5, h6,
.specialFont { overflow-wrap: break-word; }

@media screen and (max-width: 768px) {
  h1, h2, h3, h4, h5, h6,
  .specialFont {
    -webkit-hyphens: auto;
    hyphens: auto;
    hyphenate-limit-chars: 10 4 4;
    overflow-wrap: anywhere;
    word-break: normal;
  }
  /* Hauptzeilen */
  .basic__section h1:not(.specialFont),
  .basic__section h2,
  .aboutus .columnclaim h3,
  .unternehmensstruktur h3,
  .section-divider h2 { font-size: 26px; line-height: 1.25em; }
  /* Zwischenüberschriften */
  .basic__section h3,
  .produktsicherheit .alw_wrapper h3,
  a.big__hover .hover__content h3 { font-size: 22px; line-height: 1.3em; }
  .basic__section h4,
  .leistungen h4,
  .produkte h4,
  .career h5,
  .basic__section h5 { font-size: 20px; line-height: 1.3em; }
  .unternehmensstruktur .columnclaimtext h4,
  .unternehmensstruktur .columnclaimtext .specialFont { font-size: 16px; }
  /* Produktsicherheit */
  .produktsicherheit .alw_wrapper h2 { font-size: 26px; }
  .produktsicherheit .pillar-grid .pillar { min-width: 0; padding-left: 0; padding-right: 0; }
  .produktsicherheit .checklist li { width: auto; }
  /* Bilder nie breiter als der Bildschirm */
  .basic__section img { max-width: 100%; height: auto; }
}
/* Stellenbörse: LinkedIn-Störer nicht außerhalb des Bildschirms */
@media screen and (max-width: 1230px) {
  .badge { position: static; display: inline-block; margin-top: 20px; }
}
@media screen and (max-width: 400px) {
  .basic__section h1:not(.specialFont),
  .basic__section h2,
  .aboutus .columnclaim h3,
  .unternehmensstruktur h3,
  .section-divider h2 { font-size: 23px; }
  .hero .slideitem h2,
  .hero .slideitem h1:not(.specialFont) { font-size: 24px; }
  .produktsicherheit .alw_wrapper h2 { font-size: 23px; }
}

/* ==========================================================================
   Segment-Kacheln (Startseite): Overlay über die ganze Kachel,
   "Segment" + Titel horizontal und vertikal mittig (30.09. / 01.10.)
   ========================================================================== */
html a.big__hover:not(.alw_visible) .hover__content {
  top: 0;
  bottom: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
html a.big__hover:not(.alw_visible) .hover__content .table__container { display: block; width: 100%; height: auto; }
html a.big__hover:not(.alw_visible) .hover__content .table__container > div { display: block; height: auto; text-align: center; width: 84%; margin: 0 auto; padding: 20px; hyphens: auto;}
html a.big__hover:not(.alw_visible) .hover__content p.specialFont {
  color: #fff;
  line-height: 1.1em;
  margin: 0 0 0.1em;
  text-align: center;
}
html a.big__hover:not(.alw_visible) .hover__content p.specialFont + h3 { margin-top: 0; }
html a.big__hover:not(.alw_visible) .hover__content h3 {
  line-height: 1.3em;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 0;
}

/* ==========================================================================
   Icons einheitlich 64px hoch (30.09.) – Breite automatisch.
   Nicht betroffen: Kreis-Icons im Leistungen-Slider (.circle img).
   ========================================================================== */
.aboutus .column .columnclaim img,
.leistungen .column .columnclaim img,
.value-icon img,
.value-tiles .value-tile .value-icon img,
.pillar-grid .pillar > .value-icon img,
.karrierebox .value-icon img,
.benefits .pillar-icon { height: 64px; width: auto; max-width: 100%; }
.value-icon,
.value-tiles .value-tile .value-icon,
.pillar-grid .pillar > .value-icon { height: 64px; width: fit-content; }
.karrierebox .value-icon { height: auto; }

/* ==========================================================================
   Korrekturrunde 01.10.2026
   ========================================================================== */
/* Punkt 8: Startseite – Logo "Snack smart. Live better!" statt Text */
html .basic__section h1.sslb-heading { display: flex; flex-direction: column; align-items: center; gap: 10px; }
html .basic__section h1.sslb-heading .sslb-heading__logo { display: block; width: 100%; max-width: 560px; height: auto; }
@media (max-width: 620px) {
  html .basic__section h1.sslb-heading .sslb-heading__logo { max-width: 320px; }
}

/* ==========================================================================
   Korrekturrunde 02.10.2026
   ========================================================================== */
/* Über uns, Kapitel 2: Unterzeilen unter den Wortgrafiken (.pt10.line)
   unterhalb von 1230px einzeilig; zwischen 866 und 1230px skaliert die
   Schrift mit, damit "Unsere Art zu arbeiten." (ca. 13em) in die Spalte passt. */
@media screen and (max-width: 1230px) {
  .antrieb p.pt10.line { white-space: nowrap; }
}
@media screen and (min-width: 866px) and (max-width: 1230px) {
  .antrieb p.pt10.line { font-size: min(1em, calc((min(100vw, 980px) - 180px) / 52)); }
}

/* Was wir bieten: Charlotte-Zeilen in den Karrierewegen größer
   .path-claim = "Der erste Schritt." … · .path-outro = "Eben: nut just a job." */
html .pageWrapper .path-grid .path-tile .specialFont.path-claim,
html .pageWrapper .path-grid .path-tile p.path-claim {
  font-size: var(--nw-script-size-small) !important;
  line-height: 1.2em;
  margin: 0 0 4px;
}
html .pageWrapper .path-outro .specialFont,
html .pageWrapper .path-outro p.specialFont {
  font-size: var(--nw-script-size) !important;
  line-height: 1.25em;
  margin: 10px 0 0;
}

/* Überschriften auf dunklem Hintergrund immer weiß (02.10.)
   Gilt für braune Sektionen, .color__white, Konsumtrends (.bg-vorteile) und
   Bild-Overlays. Hell hinterlegte Karten darin (Claim-Panel, Lockup) sind
   ausgenommen. "html" + Element = schlägt .basic__section h2 / .produkte h4 … */
html :is(.bg__brown, .bg__brightbrown, .color__white, .bg-vorteile, .hover__content)
  :is(h1, h2, h3, h4, h5, h6, .specialFont):not(.nwhero__panel *):not(.hero-lockup *):not(.bg__peanut-beige *) {
  color: #fff;
}
html body .hero p.specialFont {
  margin: 0 0 0.1em;
  line-height: 1.15em;
}
html body .hero p.specialFont + h2 {
  margin-top: 0;
}

/* Sprachumschalter aktiv (Livegang DE/EN, 02.10.): mobile Kontaktleiste
   mit Sprache + Telefon + E-Mail ohne Umbruch in einer Zeile */
@media screen and (max-width: 570px) {
  header .header__contact { justify-content: space-between; align-items: stretch; }
  header .header__contact > a { flex: 0 0 auto; display: flex; align-items: center; white-space: nowrap; font-size: 12px; padding: 5px 6px; }
  header ul.lang { flex: 1 1 auto; min-width: 0; margin-right: 4px; }
  header ul.lang li a { padding: 6px 8px; line-height: 1.3; }
  header ul.lang li.lang__de span, header ul.lang li.lang__en span { font-size: 12px; }
}
@media screen and (max-width: 360px) {
  header .header__contact > a { font-size: 11px; padding: 5px 3px; }
}