Script Editor

HTML: copy HTML

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Demo-Seite</title>
    <link rel="stylesheet" href="template01.css">
    
</head>
<body>

<div class="header_out temp_out">
        <div class="header_in temp_in">
            <div class="logo_out modul">
                <div class="logo">
                    <a href="#"><img src="scripte/img/logo/logo_w.png" alt="Bild 01"></a>
                </div>
            </div>
            <div class="menu_out modul">
                <ul class="menu">
                    <li><a href="#">Dashboard</a>
                        <ul>
                            <li><a href="#">Reports</a>
                                <ul>
                                    <li><a href="#">Annual</a></li>
                                    <li><a href="#">Monthly</a></li>
                                    <li><a href="#">Custom</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Analytics</a>
                                <ul>
                                    <li><a href="#">Traffic</a></li>
                                    <li><a href="#">Conversion</a></li>
                                    <li><a href="#">Engagement</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Settings</a>
                        <ul>
                            <li><a href="#">Profile</a>
                                <ul>
                                    <li><a href="#">Info</a></li>
                                    <li><a href="#">Security</a></li>
                                    <li><a href="#">Notifications</a></li>
                                </ul>
                            </li>
                            <li><a href="#">Preferences</a>
                                <ul>
                                    <li><a href="#">Theme</a></li>
                                    <li><a href="#">Language</a></li>
                                    <li><a href="#">Accessibility</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li><a href="#">Projects</a>
                        <ul>
                            <li><a href="#">Active</a></li>
                            <li><a href="#">Archived</a></li>
                            <li><a href="#">New</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Messages</a>
                        <ul>
                            <li><a href="#">Inbox</a></li>
                            <li><a href="#">Sent</a></li>
                            <li><a href="#">Drafts</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Support</a>
                        <ul>
                            <li><a href="#">FAQ</a></li>
                            <li><a href="#">Contact</a></li>
                            <li><a href="#">Live Chat</a></li>
                        </ul>
                    </li>
                </ul>

<div class="poppupbox_menu poppupbox">
        <div class="poppupbox_close">
            <img src="scripte/img/icons/close.png">
        </div>
        <ul class="menu_smartphone">
            <li><a href="#">Dashboard</a>
                <ul>
                    <li><a href="#">Reports</a>
                        <ul>
                            <li><a href="#">Annual</a></li>
                            <li><a href="#">Monthly</a></li>
                            <li><a href="#">Custom</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Analytics</a>
                        <ul>
                            <li><a href="#">Traffic</a></li>
                            <li><a href="#">Conversion</a></li>
                            <li><a href="#">Engagement</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Settings</a>
                <ul>
                    <li><a href="#">Profile</a>
                        <ul>
                            <li><a href="#">Info</a></li>
                            <li><a href="#">Security</a></li>
                            <li><a href="#">Notifications</a></li>
                        </ul>
                    </li>
                    <li><a href="#">Preferences</a>
                        <ul>
                            <li><a href="#">Theme</a></li>
                            <li><a href="#">Language</a></li>
                            <li><a href="#">Accessibility</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Projects</a>
                <ul>
                    <li><a href="#">Active</a></li>
                    <li><a href="#">Archived</a></li>
                    <li><a href="#">New</a></li>
                </ul>
            </li>
            <li><a href="#">Messages</a>
                <ul>
                    <li><a href="#">Inbox</a></li>
                    <li><a href="#">Sent</a></li>
                    <li><a href="#">Drafts</a></li>
                </ul>
            </li>
            <li><a href="#">Support</a>
                <ul>
                    <li><a href="#">FAQ</a></li>
                    <li><a href="#">Contact</a></li>
                    <li><a href="#">Live Chat</a></li>
                </ul>
            </li>
        </ul>
    </div>

<div class="mySlides fade">
                <img src="scripte/img/content/img_b_05.jpg" style="width:100%">
                <div class="slideshow-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
                </div>
            
                <div class="mySlides fade">
                <img src="scripte/img/content/img_b_08.jpg" style="width:100%">
                <div class="slideshow-text">Aenean commodo ligula eget dolor. Aenean massa.</div>
                </div>
            
                <div class="mySlides fade">
                <img src="scripte/img/content/img_b_06.jpg" style="width:100%">
                <div class="slideshow-text">Cum sociis natoque penatibus et magnis dis parturient montes.</div>
                </div>
            
                <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
                <a class="next" onclick="plusSlides(1)">&#10095;</a>
            </div>
            <br>
            
            <div class="dot-container">
                <span class="dot" onclick="currentSlide(1)"></span>
                <span class="dot" onclick="currentSlide(2)"></span>
                <span class="dot" onclick="currentSlide(3)"></span>
            </div>
        </div>

<div class="box-container_out modul">
            <div class="box-container">
                <div class="box">
                    <img src="scripte/img/content/img_b_03.jpg" alt="Placeholder Image">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p><a class="readmore">Read more...</a>
                </div>
                <div class="box">
                    <img src="scripte/img/content/img_b_09.jpg" alt="Placeholder Image">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p><a class="readmore">Read more...</a>
                </div>
                <div class="box">
                    <img src="scripte/img/content/img_b_06.jpg" alt="Placeholder Image">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p><a class="readmore">Read more...</a>
                </div>
                <div class="box">
                    <img src="scripte/img/content/img_b_06.jpg" alt="Placeholder Image">
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p><a class="readmore">Read more...</a>
                </div>
            </div>
        </div>

<div class="simple-image-box_out">
            <div class="simple-image-box">
                <div class="simple-image-content">
                <h2>Lorem ipsum dolor sit amet</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus lacinia odio vitae vestibulum vestibulum.</p>
                </div>
            </div>
        </div>

<div class="list_out modul">
            <div class="list">
                <ul>
                    <li><a href="#"><img src="scripte/img/content/img_m_01.jpg" alt="Image 01"><h3>Summer Evening</h3></a></li>
                    <li><a href="#"><img src="scripte/img/content/img_m_02.jpg" alt="Image 02"><h3>Blue Horizon</h3></a></li>
                    <li><a href="#"><img src="scripte/img/content/img_m_03.jpg" alt="Image 03"><h3>Forest Path</h3></a></li>
                    <li><a href="#"><img src="scripte/img/content/img_m_04.jpg" alt="Image 04"><h3>Silent Lake</h3></a></li>
                    <li><a href="#"><img src="scripte/img/content/img_m_05.jpg" alt="Image 05"><h3>Abandoned Road</h3></a></li>
                    <li><a href="#"><img src="scripte/img/content/img_m_06.jpg" alt="Image 06"><h3>Sunrise</h3></a></li>
                    <li><a href="#"><img src="scripte/img/content/img_m_07.jpg" alt="Image 07"><h3>Red Poppy</h3></a></li>
                    <li><a href="#"><img src="scripte/img/content/img_m_08.jpg" alt="Image 08"><h3>Rocky Coast</h3></a></li>                    
                </ul>
            </div>
        </div>

</div>
</div>

<div class="footer_out temp_out">
    <div class="footer_in temp_in modul">
        <div class="footer_col">
            <div class="footer_title">About Us</div>
            <div class="footer_text">
                We offer modern web solutions with a focus on performance, design and user-friendliness.
            </div>
        </div>
  
        <div class="footer_col">
            <div class="footer_title">Navigation</div>
            <div class="footer_link"><a href="#">Home</a></div>
            <div class="footer_link"><a href="#">Services</a></div>
            <div class="footer_link"><a href="#">Projects</a></div>
            <div class="footer_link"><a href="#">Contact</a></div>
        </div>
  
        <div class="footer_col">
            <div class="footer_title">Folge uns</div>
                <div class="social_links">
                    <div><a href="#"><img src="scripte/img/icons/facebook_logo.svg" alt="Facebook"></a></div>
                    <div><a href="#"><img src="scripte/img/icons/instagram_logo.svg" alt="Instagram"></a></div>
                    <div><a href="#"><img src="scripte/img/icons/x_logo.svg" alt="X"></a></div>
                </div>
            </div>
        </div>
        <div class="footer_bottom">
            <div class="footer_bottom_in">
                <div class="copyright" style="text-align:center; padding-top:3px; padding-bottom:14px;">
                    <span style="display:inline-block; color:#ffffff; font-size:11px; margin-top:10px;">&copy; Copyright Daniel Friedgen | www.daniel-friedgen.de</span>
                    <p style="display:inline-block; color:#ffffff!important; margin:0px 0px 0px 10px; font-size:11px;">
                    <a style="color:#ffffff;" class="footerlink" href="#">Imprint</a> | 
                    <a style="color:#ffffff;" class="footerlink" href="#">Data protection</a> | 
                    <a style="color:#ffffff; margin-right:20px;" class="footerlink"  href="#">Contact</a>
                    </p>
                </div>
                </div>
            </div>
        </div>
  </div>

CSS: copy CSS

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background-color: #f4f4f4;
}

.temp_out {
    width: 100%;
    margin: 0 auto 0;
}

.temp_in {
    width: 100%;
    margin: 0 auto 0;
}

.modul {
    width: 90%;
    margin: 0 auto 0;
    max-width: 1920px;
}

.header_in {
    width: 90%;
    margin: 0 auto 0;
    max-width: 1920px;
}

.header_out {
    background-color: #1e3c72;
}

.header_in {
    display: table;
    height: 40px;
}

.logo_out {
    display: table-cell;
    vertical-align: middle;
    width: 20%;
}

.logo a img {
    margin-top: 10px;
    margin-bottom: 10px;
    height: auto;
    width: auto;
    max-height: 40px;
    margin-left: 20px;
}

.menu_out {
    display: table-cell;
    vertical-align: middle;
    width: 80%;
    text-align: left;
}

.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: table;
    height: 100%;
    margin-left: auto;
}

.menu a {
    color: #ffffff;
    text-decoration: none;
}

.menu > li {
    display: table-cell;
    vertical-align: middle;
    padding: 0 20px;
    background-color: rgba(255, 255, 255, 0.1);
    color: white;
    cursor: pointer;
    position: relative;
}

.menu > li:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.menu li ul {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: #2a5298;
    list-style: none;
    padding: 0;
    margin: 0;
    border-radius: 0 0 6px 6px;
    white-space: nowrap;
    z-index: 1000;
}

.menu li:hover > ul {
    display: block;
}

.menu li ul li {
    padding: 10px 20px;
    color: white;
}

.menu li ul > li {
    min-width: 200px;
}

.menu li ul li:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.menu li ul li ul {
    right: 100%;
    top: 0;
}

.smartphonemenubutton {
    display: none;
    top: 20px;
    right: 20px;
    border: none;
    padding: 15px;
    z-index: 1000;
    text-align: right;
}

.smartphonemenubutton img {
    float: right;
    cursor: pointer;
    width: auto;
    height: auto;
    transition: transform 0.3s ease;
    max-height: 40px;
  }

@media (max-width: 900px) {
    .smartphonemenubutton {
        display: block;
    }

.menu_out .menu {
        display: none;
    }
}

.poppupbox_close {
    position: fixed;
    top: 20px;
    right: 20px;
    width: 20px;
}

.poppupbox_close img {
    width: 100%;
    height: auto;
}

.poppupbox_menu {
    display: none; 
    position: fixed;
    top: 0;
    right: 0;
    width: 250px;
    height: 100%;
    background-color: #111;
    z-index: 999;
    padding: 20px;
    box-shadow: -4px 0px 10px rgba(0, 0, 0, 0.5);
    transition: transform 0.3s ease-in-out;
}

.poppupbox_menu.show {
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.747);
    display: block; 
    transform: translateX(0); 
}

.poppupbox_menu {
    display: none; 
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 999;
    justify-content: center;
    align-items: center;
}

.poppupbox_menu.show {
    display: flex;
}

.menu_smartphone {
    width: 500px;
    max-width: 90vw;
    list-style-type: none;
    padding: 0;
    margin: 0;
    font-size: 16px;
    color: #fff;
    background-color: #1e3c72;
    border-radius: 8px;
    overflow: hidden;
    max-height: 80%;
    overflow-y: auto;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.7);
    padding: 10px 0;
}

.menu_smartphone > li {
    margin: 10px 0;
    position: relative;
}

.menu_smartphone > li > ul {
    list-style-type: none;
    padding-left: 0px;
    left: 100%;
    top: 0;
    border-radius: 8px;
    width: 100%;
}

.menu_smartphone > li > a {
    text-decoration: none;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    padding: 10px 15px;
    display: block;
    background-color: #07193a;
}

.menu_smartphone > li > a:hover {
    color: #1e90ff;
    background-color: #0f2958;
}

.menu_smartphone > li:hover > ul {
    display: block;
}

.menu_smartphone li ul li {
    margin: 10px 0;
    font-size: 14px;
    color: #ccc;
}

.menu_smartphone li ul li a {
    color: #ccc;
    font-size: 14px;
    padding: 8px 15px;
    display: block;
    text-decoration: none;
}

.menu_smartphone li ul li a:hover {
    color: #fff;
    background-color: #07193a;
}

.slideshow-container_out {
    position: relative;
    width: 100%!important;
    margin: 0 auto 0;
}

.slideshow-container_out .slideshow-container {
    width: 100%;
    max-width: 100%;
    height: 500px;
    position: relative;
    margin: 0 auto;
    overflow: hidden;
}

.slideshow-container_out .mySlides {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.slideshow-container_out .mySlides img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.slideshow-container_out .prev,
.slideshow-container_out .next {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    margin-top: -22px;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 18px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none;
    z-index: 10;
}

.slideshow-container_out .next {
    right: 0;
    border-radius: 3px 0 0 3px;
}

.slideshow-container_out .prev:hover,
.slideshow-container_out .next:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.slideshow-container_out .slideshow-text {
    position: absolute;
    bottom: 100px;
    width: 100%;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    color: #f2f2f2;
    padding: 0 12px;
    z-index: 5;
    line-height: 1;
    padding: 10px 0px 10px 0px;
    background-color: rgba(30, 59, 114, 0.596);
}

.slideshow-container_out .dot-container {
    background-color: #1e3c72;
    position: absolute;
    bottom: 75px;
    width: 100%;
    text-align: center;
    padding: 10px 0px 10px 0px;
    z-index: 5;
}

.slideshow-container_out .dot {
    cursor: pointer;
    height: 15px;
    width: 15px;
    margin: 0 4px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.slideshow-container_out .active,
.slideshow-container_out .dot:hover {
    background-color: #717171;
}

.slideshow-container_out .fade {
    animation-name: fade;
    animation-duration: 1.5s;
}

@keyframes fade {
    from {
        opacity: 0.4;
    }
    to {
        opacity: 1;
    }
}

.box-container_out .box-container {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    justify-content: center;
    margin-top: -60px;
}

.box-container_out .box {
    margin-bottom: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    padding: 16px;
    width: calc(25% - 2%);
    box-sizing: border-box;
    transition: transform 0.3s ease;
    z-index: 2;
}

.box-container_out .box:hover {
    transform: translateY(-5px);
}

.box-container_out .box img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 12px;
}

.box-container_out .box p {
    font-family: 'Arial', sans-serif;
    font-size: 15px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 16px;
    flex-grow: 1;
}

.box-container_out .box .readmore {
    display: inline-block;
    margin-top: 12px;
    padding: 8px 16px;
    background-color: #1e3c72;
    color: white;
    cursor: pointer;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    float: right;
    transition: background-color 0.3s ease;
}

.box-container_out .box .readmore:hover {
    background-color: #005bb5;
}

@media (max-width: 900px) {
    .box-container_out .box {
        width: calc(50% - 20px);
    }
}

@media (max-width: 600px) {
    .box-container_out .box {
        width: 100%;
    }
}

.simple-image-box_out .simple-image-box {
    height: 500px;
    background-image: url('scripte/img/content/img_b_02.jpg');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-align: center;
    overflow: hidden;
    margin: 20px 0px;
}

.simple-image-box_out .simple-image-content {
    background-color: rgba(0, 0, 0, 0.5);
    padding: 40px;
    border-radius: 12px;
    max-width: 600px;
    z-index: 1;
    position: relative;
    border: 5px solid #fff;
}

.simple-image-content h2 {
    color: #1e3c72;
    text-shadow: 0px 0px 5px #FFFFFF;
}

.list > ul {
    list-style: none;
    padding: 0px;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(21%, 1fr));
    gap: 20px 2%;
    margin: 40px 0px 40px 0px;
}

.list li {
    background-color: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s ease;
}

.list li:hover {
    transform: scale(1.03);
}

.list a {
    display: block;
    text-decoration: none;
    color: inherit;
}

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

.list h3 {
    margin: 0;
    padding: 1rem;
    font-size: 1rem;
    text-align: center;
    color: #1e3c72;
}

@media (max-width: 1200px) {
    .list ul {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
    max-width: 1400px;
    }

.list img {
    height: 190px;
    }
}

.footer_out {
    background-color: #111;
    color: #fff;
    padding: 60px 0px 40px 0px;
}

.footer_in {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    gap: 40px;
    justify-content: space-between;
}

.footer_col {
    flex: 1;
    min-width: 250px;
}

.footer_title {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: 600;
}

.footer_text {
    font-size: 14px;
    line-height: 1.6;
    color: #ccc;
}

.footer_link {
    margin-bottom: 10px;
}

.footer_link a {
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.3s ease;
}

.footer_link a:hover {
    color: #fff;
}

.social_links {
    display: inline-block;
    text-align: left;
    margin-top: 20px;
    width: 100%;
    clear: both;
}

.social_links div {
    display: inline-block;
    margin: 0 8px;
    vertical-align: middle;
}

.social_links a {
    display: block;
    text-align: center;
}

.social_links img {
    width: 24px;
    height: 24px;
    filter: brightness(0) invert(1);
    transition: transform 0.3s ease;
}

.social_links img:hover {
    transform: scale(1.1);
}

.footer_bottom {
    margin-top: 40px;
    text-align: center;
    font-size: 12px;
    color: #aaa;
}

.footer_bottom a {
    color: #ccc;
    text-decoration: none;
}

.footer_bottom a:hover {
    color: #fff;
}

.cookie-box_out .cookie-box {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 640px;
    width: 90%;
    background-color: #ffffff;
    color: #333;
    padding: 20px 30px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-family: system-ui, sans-serif;
}

.cookie-box_out .cookie-text p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

.cookie-box_out .cookie-text a {
    color: #0073e6;
    text-decoration: underline;
}

.cookie-box_out .cookie-actions {
    display: flex;
    justify-content: flex-end;
}

.cookie-box_out .cookie-actions button {
    background-color: #0073e6;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.3s ease;
}

.cookie-box_out .cookie-actions button:hover {
    background-color: #005bb5;
}

JavaScript: copy JS

let slideIndex = 1;
let slideInterval = setInterval(() => {
  plusSlides(1);
}, 9000);

showSlides(slideIndex);

// Manuelle Steuerung
function plusSlides(n) {
  showSlides(slideIndex += n);
  resetInterval(); // Nach manuellem Wechsel den Intervall zurücksetzen
}

function currentSlide(n) {
  showSlides(slideIndex = n);
  resetInterval(); // Nach manuellem Wechsel den Intervall zurücksetzen
}

// Anzeige der Slides
function showSlides(n) {
  let i;
  let slides = document.getElementsByClassName("mySlides");
  let dots = document.getElementsByClassName("dot");
  if (n > slides.length) { slideIndex = 1 }
  if (n < 1) { slideIndex = slides.length }
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex - 1].style.display = "block";
  if (dots.length) {
    dots[slideIndex - 1].className += " active";
  }
}

// Automatische Rotation alle 5 Sekunden
function resetInterval() {
  clearInterval(slideInterval); // Setzt den aktuellen Intervall zurück
  slideInterval = setInterval(() => { // Startet den Intervall neu
    plusSlides(1);
  }, 9000);
}

document.addEventListener("DOMContentLoaded", function () {
    const cookieBox = document.getElementById("cookieBox");
    const cookieAccept = document.getElementById("cookieAccept");

if (!localStorage.getItem("cookieAccepted")) {
        cookieBox.style.display = "flex";
    }

cookieAccept.addEventListener("click", function () {
        localStorage.setItem("cookieAccepted", "true");
        cookieBox.style.display = "none";
    });
});

document.querySelector('.smartphonemenubutton_a').addEventListener('click', function() {
    const menu = document.querySelector('.poppupbox_menu');
    menu.classList.toggle('show'); // Toggle the menu visibility
});

// Schließen des Menüs
document.querySelector('.poppupbox_close').addEventListener('click', function() {
    const menu = document.querySelector('.poppupbox_menu');
    menu.classList.remove('show'); // Entfernt die Klasse 'show' und schließt das Menü
});