/*=============== FONT FACE ===============*/
@font-face {
   font-family: "KH Teka";
   src: url(../fonts/KHTeka-Regular.woff2) format("woff2"),
        url(../fonts/KHTeka-Regular.woff) format("woff");
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "KH Teka";
   src: url(../fonts/KHTeka-Medium.woff2) format("woff2"),
        url(../fonts/KHTeka-Medium.woff) format("woff");
   font-weight: 500;
   font-style: normal;
   font-display: swap;
}

@font-face {
   font-family: "KH Teka";
   src: url(../fonts/KHTeka-Bold.woff2) format("woff2"),
        url(../fonts/KHTeka-Bold.woff) format("woff");
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}


/*=============== VARIABLES CSS ===============*/
:root {
   --header-height: 7rem;

   /*========== Media overlay (Abdunklung für Lesbarkeit über Bild/Video) ==========*/
   --media-overlay: rgba(0, 0, 0, 0.35);

   /*========== Colors ==========*/
   --title-color: hsl(240, 4%, 11%);
   --text-color: hsl(0, 0%, 28%);
   --body-color: hsl(220, 100%, 99%);
   --link-color-hover: hsl(328, 98%, 47%);
   --faf-color-darkred: #a40938;
   --faf-color-pink: #F0047F;
   --faf-color-orange: #F4310A;
   --faf-gradient_1: #F0047F;
   --lightgrey: #f3f3f3;
   --pink-color: #ff009f;
   --dirtyblue: #eceff6;
   --dirtydarkblue: #07122a;
   --greenColor: #6ab44c;
   --metallgrey: #3f474d;
   --jade: #2d5760;

   /*========== Font and typography ==========*/
   --body-font: "KH Teka", sans-serif;
   --script-font: "dreaming-outloud-sans", sans-serif;
   --normal-font-size: 1rem;

   /*========== Font weight ==========*/
   --font-medium: 400;
   --font-semi-bold: 500;
   --font-bold: 600;

   /*========== z index ==========*/
   --z-tooltip: 10;
   --z-fixed: 100;

   --lottie-size: 60px;
}


/*=============== BASE RESET ===============*/
* {
   box-sizing: border-box;
   padding: 0;
   margin: 0;
}

html {
   -webkit-text-size-adjust: 100%;
   text-size-adjust: 100%;
   scroll-behavior: smooth;
   overflow-x: hidden;
}

body {
   font-family: var(--body-font), sans-serif;
   font-size: var(--normal-font-size);
   background-color: #ffffff;
   color: var(--text-color);
   border: 1px solid red;
}

main {
   width: 96%;
   margin: 0 auto;
}

ul {
   list-style: none;
}

a {
   text-decoration: none;
   color: #fff;
}


/*=============== TYPOGRAPHY ===============*/

h1 {
   font-family: var(--body-font), sans-serif;
   font-size: 0.75rem;
   letter-spacing: 8px;
   text-transform: uppercase;
   font-weight: 400;
}

h2 {
   font-family: var(--body-font), sans-serif;
   font-size: clamp(2.5rem, 2.75rem, 3rem);
   line-height: clamp(3rem, 3.25rem, 4rem);
   font-weight: 500;
   color: #3b3b3b;
}

h2.medium {
   font-family: var(--body-font), sans-serif;
   font-size: 2.5rem;
   line-height: clamp(1.35rem, 1.5rem, 1.75rem);
   font-weight: 500;
}

h2.extrabig {
   font-family: var(--body-font), sans-serif;
   font-size: clamp(2rem, 4vw, 4.5rem);
   line-height: 1.15;
   letter-spacing: -0.02em;
   font-weight: 700;
   width: 100%;
}

h2.extrabig.pinktext {
   color: var(--pink-color) !important;
}

h3 {
   font-family: var(--body-font), sans-serif;
   font-size: clamp(1.5rem, 1.75rem, 1.85rem);
   line-height: clamp(2rem, 2.25rem, 2.45rem);
   font-weight: 500;
   width: auto;
   display: inline-block;
   width: -moz-fit-content;
   width: fit-content;
   max-width: 100%;
   white-space: normal;
   text-align: left;
   color: var(--text-color);
}

h3.pink {
   background-color: var(--pink-color);
   width: 100%;
   padding: 3rem 0 3rem 1rem;
   color: #fff;
   letter-spacing: 5px;
   font-weight: 600;
}

h3.dirtydarkblue {
   background-color: var(--dirtydarkblue);
   width: 100%;
   padding-left: 1rem;
   padding-right: 2rem;
   color: #fff;
}

h3.spacing {
   letter-spacing: 1px;
}

h3.legaltext {
   padding-top: 0;
   padding-bottom: 1rem;
}

h4 {
   font-family: var(--body-font), sans-serif;
   font-size: clamp(1rem, 1.25rem, 1.45rem);
   line-height: clamp(1.25rem, 1.5rem, 1.74rem);
   font-weight: 300;
   color: var(--text-color);
}

h4.light {
   font-weight: 300;
   font-size: clamp(1.1rem, 1.2vw, 1.3rem);
   line-height: clamp(1.3rem, 1.4vw, 1.5rem);
}

h4.spacing {
   font-size: 0.85rem;
   font-weight: 500;
   letter-spacing: 3px;
   text-transform: uppercase;
   padding: 0;
}

h5 {
   font-family: var(--body-font), sans-serif;
   font-size: clamp(1.1rem, 1.25vw, 1.35rem);
   line-height: clamp(1.5rem, 1.5vw, 2rem);
   font-weight: 400;
}

p {
   font-family: var(--body-font), sans-serif;
   font-size: clamp(1.1rem, 1.15rem, 1.2rem);
   line-height: clamp(1.65rem, 1.75rem, 2rem);
   letter-spacing: 1px;
   font-weight: 400;
   color: var(--text-color);
}

p.bold {
   font-weight: 500;
}

p.legaltext {
   font-size: clamp(0.9rem, 0.9rem, 1em);
   line-height: clamp(1.45rem, 1.55rem, 1.75rem);
   letter-spacing: 1px;
   font-weight: 400;
}

ul.legaltext {
   font-size: clamp(0.9rem, 0.9rem, 1em);
   line-height: clamp(1.45rem, 1.55rem, 1.75rem);
   letter-spacing: 1px;
   font-weight: 400;
}

ul.legaltext li {
   padding-left: 1.5em;
   text-indent: -1.5em;
}

ul.legaltext li::before {
   content: '';
   display: inline-block;
   width: 8px;
   height: 8px;
   background-color: #e91e8c;
   margin-right: 1em;
   vertical-align: middle;
   flex-shrink: 0;
}

a.textlink {
   text-decoration: none;
   color: var(--text-color);
   opacity: 1;
   transition: opacity 0.3s ease;
}

a.textlink:hover {
   opacity: 0.7;
   color: var(--pink-color);
}

.bold {
   font-family: "KH Teka", sans-serif;
   font-weight: 700;
}

.big {
   font-family: var(--body-font), sans-serif;
   font-size: 4rem;
   line-height: 1.0625;
   letter-spacing: -0.02em;
   font-weight: 700;
}

.small {
   font-weight: 600;
   font-size: 1rem;
   color: var(--title-color);
   padding-bottom: 2rem;
}

[class*=gradient-text] {
   width: -moz-fit-content;
   width: fit-content;
   background-clip: text;
   -webkit-text-fill-color: transparent;
}

.gradient-text-blue {
   --gradient-start: #022640;
   --gradient-end: #5786AB;
   background-image: linear-gradient(90deg, var(--gradient-start), var(--gradient-end));
}

.gradient-text-blue .word {
   color: #494646;
}

.black {
   color: #000;
}

.white {
   color: #fff;
}


/*=============== COLOUR UTILITIES ===============*/

.lightgrey {
   background-color: var(--lightgrey);
}

.background-black {
   background-color: #000;
}

.pink {
   background-color: var(--faf-color-pink);
}

.pink-text {
   color: var(--faf-color-pink);
}

.pink-gradient {
   background-color: var(--faf-gradient_1);
}

.dirtyblue {
   background-color: var(--dirtyblue);
}

.dirtyblue-text {
   color: var(--dirtyblue);
}

.dirtydarkblue {
   background-color: var(--dirtydarkblue);
}

.dirtydarkblue-text {
   color: var(--dirtydarkblue);
}


/*=============== SPACING UTILITIES ===============*/

.pb1 { padding-bottom: 8px; }
.pb2 { padding-bottom: 16px; }
.pb3 { padding-bottom: 32px; }
.pb4 { padding-bottom: 40px; }
.pb5 { padding-bottom: 48px; }
.pb8 { padding-bottom: 64px; }

.pt1 { padding-top: 8px; }
.pt2 { padding-top: 16px; }
.pt3 { padding-top: 24px; }
.pt4 { padding-top: 32px; }
.pt5 { padding-top: 40px; }
.pt6 { padding-top: 48px; }
.pt8 { padding-top: 64px; }
.pt10 { padding-top: 0.625rem; }


/*=============== LAYOUT & CONTAINERS ===============*/

.container-text {
   position: absolute;
   top: 50%; left: 50%;
   transform: translate(-50%, -50%);
   width: 60%;
   z-index: 2;
}



.container-flex.legal {
   margin-top: 12rem;
}

.container-flex-text {
   width: 70%;
   margin: auto;
}

.container-flex-text h2.extrabig .left {
   text-align: left;
}

.container-flex-text h2 {
   display: block;
   width: 70%;
   padding-bottom: 1rem;
}

.container-flex-text h3 {
   display: block;
   width: 70%;
}

.container-flex-text p {
   display: block;
   width: 50%;
   margin: auto;
}

.container-flex-image {
   width: 70%;
   margin: auto;
}

.container-flex-column {
   display: flex;
   margin-block-start: 0;
   margin-block-end: 1rem;
   margin-inline: auto;
   flex-direction: row;
   gap: 3rem;
   width: 70%;
}

.container-flex-column .columns {
   margin-block-start: 1rem;
}

.column {
   flex: 1;
}

.column h2.big {
   font-weight: 500;
}

.container-50 {
   display: flex;
   flex-direction: row;
   position: relative;
   gap: 2%;
}

.container-50-one {
   position: relative;
   display: flex;
   flex-direction: column;
   flex: 1 1;
}

.container-image {
   position: relative;
   width: 100%;
   margin: var(--header-height) auto 0 auto;
   height: auto;
}

/* Abdunkelndes Overlay für bessere Schrift-Lesbarkeit – opt-in per .has-overlay.
   Stärke global über --media-overlay oder pro Element via style="--media-overlay: …". */
.container-image.has-overlay::after {
   content: "";
   position: absolute;
   inset: 0;
   background: var(--media-overlay);
   pointer-events: none;
   z-index: 1;
}

.container-image img {
   width: 100%;
}

.container-image-content {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 100%;
   transform: translate(-50%, -50%);
}

.container-image-content h2 {
   text-align: center;
}

.container-image-content h3 {
   text-align: center;
}

.container-image .black-text {
   background-color: #000;
   width: 60%;
   position: absolute;
   top: -50px;
}

.container-image .white-text {
   background-color: #fff;
   color: #000;
   width: 60%;
   position: absolute;
   top: -50px;
}

.container-image .pink-text {
   background-color: var(--faf-color-pink);
   width: 60%;
   position: absolute;
   top: -50px;
}

.content {
   width: clamp(75%, 80%, 85%);
   display: flex;
   flex-direction: column;
   justify-content: center;
}

.content_image {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   overflow: hidden;
   flex: 1 1 calc(50% - 2%);
   aspect-ratio: 1 / 1;
   box-sizing: border-box;
   width: 100%;
   height: 100%;
}

.content_image img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.split-section {
   display: flex;
   gap: 0;
   align-items: stretch;
   margin-bottom: 2%;
}

.split-section.top {
   margin-top: var(--header-height);
}

.split-section_2 {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 2%;
}

.text-section_2 {
   display: flex;
   flex-direction: column;
   padding-bottom: 5rem;
}

.text-section.long {
   aspect-ratio: auto;
   padding: 5rem 0;
}

.img_inline img {
   width: 100%;
   height: auto;
   display: block;
}

.center {
   text-align: center;
   margin-left: auto;
   margin-right: auto;
}

.right {
   text-align: right;
}

.no-margin-top {
   margin-top: 0;
}

.table-flex {
   width: 70%;
   margin: 0 auto;
   display: flex;
   justify-content: flex-start;
   align-items: flex-start;
   gap: 20px;
}

.table-flex-text {
   flex: 1;
}



/*=============== SECTIONS ===============*/

section[id] {
   scroll-margin-top: 120px;
}

/* Workpiece / Production facts sitzen jetzt auf den .column-Divs –
   eigener Header-Abstand, damit der Sprung-Anker nicht unter dem Header landet. */
#workpiece,
#production {
   scroll-margin-top: 200px;
}

section.entry {
   position: relative;
}

section.plainText {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
}

.bleifrei {
   background-color: #f0f5f8;
   padding: 3rem;
}

.kupfer {
   background-color: #fff4f6;
   padding: 3rem;
}

.edelstahl {
   background-color: #f6f6ff;
   padding: 3rem;
}

.aluminium {
   background-color: #f6f7ff;
   padding: 3rem;
}

.drehtechnik {
   background-color: #f0f5f8;
   padding: 3rem;
}

.fraestechnik {
   background-color: #f0f5f8;
   padding: 3rem;
}

.hochglanz {
   background-color: #f0f5f8;
   padding: 3rem;
}

.indent {
   padding-left: 3rem;
}

#bleifrei {
   scroll-margin-top: -200px;
}

.divider {
   width: 100%;
   height: 120px;
   visibility: hidden;
}


/*=============== WORKPIECE LISTS ===============*/

ul.workpiece {
   font-family: var(--body-font), sans-serif;
   font-size: 1rem;
   line-height: clamp(1.75rem, 1.85rem, 2rem);
   letter-spacing: 1px;
   font-weight: 400;
   color: var(--text-color);
   width: 100%;
}

ul.workpiece li {
   width: 100%;
   padding: 0.35rem 0 0.35rem 1rem;
   border-top: 1px solid #e0e0e0;
   display: flex;
   align-items: center;
}

ul.workpiece li::before {
   content: '';
   display: inline-block;
   width: 10px;
   height: 10px;
   background-color: #e91e8c;
   margin-right: 1em;
   vertical-align: middle;
   flex-shrink: 0;
}

ul.workpiece li.pur {
   width: 100%;
   padding: 0.35rem 0 0.35rem 2rem;
   border-top: 1px solid #e0e0e0;
   display: flex;
   align-items: center;
}

ul.workpiece li.pur:before {
   content: '';
   display: inline-block;
   width: 0;
   height: 0;
   background-color: #fff;
   margin-right: 1em;
   vertical-align: middle;
   flex-shrink: 0;
}

li.even {
   background-color: #f0f5f8;
}

li.even.kupfer {
   background-color: transparent;
}

li.even.edelstahl {
   background-color: transparent;
}

li.even.aluminium {
   background-color: #f6f7ff;
}

li.odd {
   background-color: #ffffff;
}

li.transparent {
   background-color: transparent;
}


/*=============== VIDEO ===============*/

.video-section {
   display: flex;
   justify-content: center;
   align-items: center;
   position: relative;
   overflow: hidden;
   flex: 1 1 calc(50% - 2%);
   aspect-ratio: 1 / 1;
   box-sizing: border-box;
}

video {
   width: 100%;
   height: auto;
   display: block;
}

.video-desktop {
   display: block;
   position: absolute;
   inset: 0;
   overflow: hidden;
   height: 100vh;
}

.video-desktop video {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: auto;
   object-fit: cover;
}

.video-desktop video#myVideo {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
}

.video-desktop video#myVideoMobile {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   min-width: 100%;
   min-height: 100%;
   width: auto;
   height: auto;
}

.myVideo {
   width: 100%;
   height: auto;
   display: block;
   max-width: 100%;
}

#myVideo {
   position: absolute;
   top: 0;
   left: 50%;
   transform: translateX(-50%);
   width: 100%;
   height: auto;
}

.video-mobile {
   display: none;
}

.video-mobile-2 {
   display: none;
}

.video-desktop video,
.video-mobile video {
   pointer-events: none;
}

/* Video layer fills only its own section */
.video-desktop,
.video-tablet,
.video-mobile {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 1;
}

/* Video Scroll Scale */
.video-desktop-2,
.video-mobile-2 {
   position: relative;
   width: 80%;
   margin: 0 auto;
   transition: width 0.05s linear;
}

.video-desktop-2 video,
.video-mobile-2 video {
   width: 100%;
   display: block;
}

.video-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom, transparent 30%, rgba(50, 24, 49, 0.9) 100%);
   mix-blend-mode: multiply;
   opacity: 0;
   transition: opacity 1.2s ease 0.4s;
   pointer-events: none;
   z-index: 3;
}

.video-desktop-2.overlay-visible .video-overlay {
   opacity: 1;
}


/*=============== IMAGES & PICTURES ===============*/

.picture-wrapper {
   position: relative;
   display: block;
   line-height: 0;
}

.picture-wrapper img {
   width: 100%;
   display: block;
}

.image-overlay {
   position: absolute;
   inset: 0;
   background: linear-gradient(to bottom, transparent 50%, rgba(20, 30, 40, 0.2) 100%);
   mix-blend-mode: multiply;
   z-index: 1;
   pointer-events: none;
}


/*=============== MAIN CONTAINER ===============*/

.main__container > *:not(.main__container-content) {
   pointer-events: none;
}

/* Content layer floats above video */
.main__container-content {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 90%;
   z-index: 5;
   pointer-events: none;
   text-align: center;
}

.main__container-text h3 {
   margin: 0 auto;
}

.main__container-logo img {
   width: 240px;
   height: auto;
}

/* Swiper stays within its section */
.swiper {
   z-index: 2;
   position: relative;
   background: #fff;
}


/*=============== FIXED HELP ICONS ===============*/

.help {
   position: fixed;
   width: 200px;
   height: 52px;
   background-color: var(--faf-color-pink);
   opacity: 1;
   z-index: 1000;
   padding-left: 12px;
   border-radius: 5px 0 0 5px;
   transition: transform 0.5s ease-in-out;
   transform: translateX(75%);
   font-size: 12px;
   font-weight: 700;
   letter-spacing: 3px;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   animation: slideInBounce 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s none;
}

.help i {
   padding-right: 10px;
}

.help:hover {
   transform: translateX(0px);
}

.help.contact {
   top: 184px;
   right: 0;
}

.help.company {
   top: 237px;
   right: 0;
   background-color: var(--faf-color-orange);
}

.help.career {
   top: 290px;
   right: 0;
   background-color: var(--faf-color-pink);
}

.help.greeng {
   top: 343px;
   right: 0;
   background-color: var(--greenColor);
}

a.main__contact i {
   font-size: 24px;
   color: #fff;
   opacity: 1;

   &:hover {
      opacity: 0.7;
   }
}

.scroll {
   position: absolute;
   bottom: 5%;
   left: 50%;
   text-align: center;
   transform: translateX(-50%);
   background-color: rgba(0, 0, 0, 0.3);
   border-radius: 8px;
}

.scroll a:hover {
   border: 1px solid #ffffff;
   color: #ffffff;
   background-color: rgba(255, 255, 255, 0.5);
}


/*=============== SCROLL INDICATOR ===============*/

dotlottie-wc.scroll-indicator {
   position: absolute;
   left: 50%;
   bottom: 24%;
   transform: translateX(-50%);
   width: var(--lottie-size);
   height: var(--lottie-size);
   cursor: pointer;
   outline: none;
   z-index: 5;
   filter: invert(1) brightness(2);
}

dotlottie-wc.scroll-indicator:focus-visible {
   outline: 2px solid #9ae6ff;
   border-radius: 50%;
}

.scroll-indicator-container {
   /* container for scroll indicator anchor */
}

.container.onTop a[href="#next"] {
   position: relative;
   z-index: 1000;
}


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

button {
   width: 160px;
   height: 40px;
   border-radius: 20px;
   color: #fff;
   outline: none;
   border: none;
   font-weight: var(--font-bold);
   opacity: 1;
   transition: all .3s;
}

button:hover {
   opacity: 1;
   transform: scale(1.05);
}

.button {
   display: block;
   padding: 1rem 1.25rem;
   border: 1px solid #fff;
   outline: none;
   cursor: pointer;
   border-radius: 8px;
   color: #fff;
   font-size: 12px;
   font-weight: 700;
   text-transform: uppercase;
   text-align: center;
   letter-spacing: 5px;
   min-width: 140px;
   width: 400px;
   font-family: 'neue-haas-grotesk-display', sans-serif;
   margin: auto;
   opacity: 1;
}

.button.pink {
   border: 1px solid var(--faf-color-pink);
   color: var(--faf-color-pink);
   background: transparent;
}

.button.white {
   border: 1px solid #fff;
   color: #fff;
   background: transparent;
}

.button.darkblue {
   border: 1px solid var(--dirtydarkblue);
   color: var(--dirtydarkblue);
   background: transparent;
}

.container-button {
   opacity: 1;
   transition: all 0.5s;
   padding-top: 5rem;
}

.container-button:hover {
   opacity: 1;
}

.button-group {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 1rem;
   padding-block: 3rem;
}

/* Rotate dropdown icon */
.show-dropdown .dropdown__arrow {
   transform: rotate(180deg);
}


/*=============== APPLE TOGGLE BUTTON ===============*/

.apple-toggle-btn {
   all: unset;
   position: relative;
   box-sizing: border-box;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 50px;
   height: 50px;
   border-radius: 999px;
   background: var(--pink-color);
   cursor: pointer;
   overflow: hidden;
   transition:
      width 0.45s cubic-bezier(.25,.1,.25,1),
      background-color 0.45s cubic-bezier(.25,.1,.25,1),
      border-color 0.45s cubic-bezier(.25,.1,.25,1);
}

.apple-toggle-btn__closed,
.apple-toggle-btn__open {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   padding-bottom: 4px;
   line-height: 0;
}

.apple-toggle-btn__closed {
   font-size: 24px;
   color: #ffffff;
   line-height: 1;
   opacity: 1;
   transition: opacity 0.25s ease;
   padding-bottom: 4px;
}

.apple-toggle-btn__open {
   gap: 8px;
   opacity: 0;
   transition: opacity 0.25s ease 0.1s;
   font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
      system-ui, "Helvetica Neue", sans-serif;
   font-size: 18px;
   line-height: 1;
   color: #ffffff;
}

.apple-toggle-btn__icon {
   font-size: 24px;
   line-height: 1;
   display: flex;
   align-items: center;
   padding-bottom: 4px;
}

.apple-toggle-btn__icon .remixicon {
   padding-top: 6px;
}

.apple-toggle-btn__icon .remixicon i {
   color: #ffffff;
}

.apple-toggle-btn:hover,
.apple-toggle-btn:focus-visible {
   width: 180px;
   background: var(--faf-color-orange);
}

.apple-toggle-btn:hover .apple-toggle-btn__closed,
.apple-toggle-btn:focus-visible .apple-toggle-btn__closed {
   opacity: 0;
}

.apple-toggle-btn:hover .apple-toggle-btn__open,
.apple-toggle-btn:focus-visible .apple-toggle-btn__open {
   opacity: 1;
}

.apple-toggle-btn:focus-visible {
   outline: 2px solid rgba(0,0,0,0.6);
   outline-offset: 3px;
}

.apple-toggle-btn a {
   color: #ffffff;
}

/* Ensure .apple-toggle-btn never fades on hover */
button.apple-toggle-btn:hover,
.apple-toggle-btn:hover,
button.apple-toggle-btn:focus-visible,
.apple-toggle-btn:focus-visible {
   opacity: 1 !important;
}


/*=============== TEXT ANIMATIONS ===============*/

.color-fade .word {
   display: inline-block;
   transition: color 0.3s ease;
}

.word {
   display: inline-block;
   overflow: hidden;
   vertical-align: bottom;
}

.word-inner {
   display: inline-block;
   opacity: 0; /* GSAP sets this to 1 */
}

.split-animate {
   opacity: 1 !important;
}


/*=============== GSAP ===============*/

.gsap-marker-start,
.gsap-marker-end,
.gsap-pin-spacer {
   overflow: visible !important;
   pointer-events: none;
}

.gsap-pin-spacer > * {
   pointer-events: auto;
}


/*=============== ANIMATIONS ===============*/

@keyframes slideInBounce {
   0%   { transform: translateX(77%); }
   75%  { transform: translateX(90px); }
   100% { transform: translateX(100px); }
}


/*=============== HISTORY / TIMELINE ===============*/
.history {
   padding-block: 5rem;
}

.history__heading {
   font-family: "KH Teka", sans-serif;
   font-size: 1.75rem;
   font-weight: 600;
   color: var(--title-color);
   text-transform: uppercase;
   letter-spacing: 1px;
   margin-bottom: 3rem;
   padding-inline: 5rem;
}

.history__timeline {
   width: 70%;
   margin-inline: auto;
   overflow-x: auto;
   scroll-snap-type: x proximity;
   padding-bottom: 1.5rem;
   -webkit-overflow-scrolling: touch;
}

.history__track {
   position: relative;
   display: flex;
   gap: 2.5rem;
   min-width: max-content;
   list-style: none;
   margin: 0;
   padding: 0;
}

.history__track::before {
   content: "";
   position: absolute;
   top: 7px;
   left: 0;
   right: 0;
   height: 2px;
   background-color: #e0e0e0;
   z-index: 0;
}

.history__station {
   position: relative;
   z-index: 1;
   flex: 0 0 280px;
   padding-top: 2.5rem;
   scroll-snap-align: start;
}

/* Punkt auf der Linie */
.history__station::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 14px;
   height: 14px;
   border-radius: 50%;
   background-color: var(--pink-color);
   box-shadow: 0 0 0 4px #fff;
}

.history__year {
   display: block;
   font-family: "KH Teka", sans-serif;
   font-size: 1.75rem;
   font-weight: 600;
   color: var(--pink-color);
   margin-bottom: .75rem;
}

.history__text {
   font-size: 14px;
   line-height: 1.6;
   color: #3b3b3b;
}

/* Scrollbar */
.history__timeline::-webkit-scrollbar {
   height: .5rem;
}

.history__timeline::-webkit-scrollbar-thumb {
   background-color: hsl(220, 12%, 70%);
   border-radius: 1rem;
}

@media screen and (max-width: 769px) {
   .history__heading,
   .history__track {
      padding-inline: 1rem;
   }

   .history__track::before {
      left: 1rem;
      right: 1rem;
   }

   .history__station {
      flex-basis: 75vw;
   }
}

/*=============== DESKTOP & UP (min-width, deckt auch >1920px) ===============*/

@media (min-width: 769px) {
   .main__container-image {
      position: relative;
      width: 100vw;
   }
   .main__container-image img {
      width: 100%;
   }
   .logo-excerpt {
      width: 100%;
      position: absolute;
      bottom: 0;
      mix-blend-mode: multiply;
   }
   .container-image-content.bottom {
      position: absolute;
      width: 80%;
      top: 70%;
      left: 10%;
   }
}

@media (min-width: 1024px) {
   .container {
      margin-inline: auto;
   }
   .main__container-overlay.no-border {
      border-radius: 0;
   }
   .container-image-content.right {
      position: absolute;
      top: 70%;
      left: 50%;
      width: 80%;
   }
   .main__container-90 {
      width: 90vw;
      margin-left: 5vw;
   }
   .main__container-text p {
      padding-bottom: 3rem;
   }
}