body {
    background-image: url('Webseite-Hintergrund.JPG');
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Optional: Behält das Hintergrundbild beim Scrollen fixiert */
    
    color: #f8f7f7;
    font-family: 'Lora', serif;
    line-height: 1.6;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
}

/* Styling für das Logo, wenn es unter der Navigation platziert ist - Behalten, da spezifisch */
.logo-hero-placement {
    text-align: center;
    margin-bottom: 5px;
    padding-top: 0;
}

/* Anpassungen für das animierte Video-Logo - Behalten, da spezifisch */
.animated-logo-video {
    width: 620px; /* Prüfe diesen Wert, 1480px ist sehr breit. War es nicht 200px in der Anmerkung zuvor? Passe es an deine Bedürfnisse an. */
    height: auto;
    display: inline-block;
}

/* Anpassung der Hero-Sektion selbst - Behalten, da spezifisch */
.hero-section {
    text-align: center;
    padding-top: 30px;
    padding-bottom: 30px;
    color: white;
    /* background-color: rgba(0,0,0,0.5); */ /* Auskommentiert, also kein aktiver Code */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
}
.hero-section h1 {
    margin-top: 5px;
    font-size: 2em;
    margin-bottom: 10px;
}

.hero-section p {
    font-size: 1.2em;
    margin-bottom: 30px;
}

/* NEUER STICKY HEADER FÜR DIE NAVIGATION - Behalten */
.main-header {
    background-color: rgba(0,0,0,0.7);
    color: white;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 0;
    display: flex;
    justify-content: flex-start; /* Könnte auch 'center' sein, je nachdem, wie der Inhalt des Headers ausgerichtet werden soll */
}
.main-header nav ul {
    /* Desktop-Verhalten der Navigationsliste */
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex; /* Horizontal auf Desktop */
    justify-content: center;
    align-items: center;
    /* transition: all 0.3s ease; /* Für weiches Ein-/Ausblenden */ 
}

/* Hamburger-Icon Styling (Zuerst unsichtbar) */
.menu-toggle {
    display: none; /* Auf Desktop versteckt */
    font-size: 2em;
    cursor: pointer;
    color: #333; /* Oder Ihre Farbe */
    position: absolute; /* Positioniert relativ zum .main-header */
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1001;
}
/* Stil für die Navigation (INNERHALB des .main-header) - Behalten */
nav {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 10px 20px;
    position: relative;
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

nav ul li {
    margin: 0 15px;
    white-space: nowrap;
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
    font-size: 20px;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #ffd700;
}

/* Styling für die Logosymbole in der Navigation - Behalten */
.nav-logo-left, .nav-logo-right {
    height: 70px;
    width: auto;
    position: absolute;
    top: 48%;
    transform: translateY(-50%);
    z-index: -1;
}

.nav-logo-left {
    left: 0px;
}

.nav-logo-right {
    right: 0px;
    transform: translateY(-50%) scaleX(-1); /* Spiegelt das Logo horizontal */
}

/* Button-Stil - Behalten */
.button {
    display: inline-block;
    background-color: #ffd700;
    color: #333;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.button:hover {
    background-color: #e0b000;
}

/* Allgemeine Sektionen - Behalten */
.section-padding {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto 20px auto;
    position: relative;
    z-index: 1;
}

/* Globale H2-Stile - Behalten, da sie als Standard dienen und überschrieben werden können */
h2 {
    text-align: center;
    margin-bottom: 40px; /* Dies ist der Standardabstand für alle h2 */
    font-size: 2.5em;
    color: #444;
}

/* Grauer Container für bestimmte Bereiche - Behalten */
#about,
#services,
#contact,
#blog,
#faq {
    background-color: rgba(255, 255, 255, 0.6);
    color: #333;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    border-radius: 8px;
}

/* Sektionen ohne Hintergrund - Behalten */
#portfolio,
#process {
    background-color: transparent;
    color: white;
    box-shadow: none;
}

/* Überschriften und Textelemente in Sektionen ohne Hintergrund auch weiß machen - Behalten */
#portfolio h2, #portfolio p, #portfolio h3, 
#process h2, #process p, #process h3 {
    color: white;
}

/* Spezifische Anpassung für Text in .process-steps .step - Behalten */
.process-steps .step p {
    color: white;
}

/* Anpassung für Portfolio-Item-Info - Behalten */
#portfolio .portfolio-item .item-info {
    background-color: rgba(0,0,0,0.7);
    color: white;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
    box-sizing: border-box;
}

#portfolio .portfolio-item:hover .item-info {
    opacity: 1;
}

#portfolio .portfolio-item {
    border: 1px solid rgba(255,255,255,0.2);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    overflow: hidden;
    transition: transform 0.3s ease;
    position: relative;
    text-decoration: none;
    color: inherit;
    display: block;
}

#portfolio .portfolio-item:hover {
    transform: translateY(-5px);
}

#portfolio .portfolio-item h3 {
    color: white;
    margin: 0;
    text-align: center;
}
.shop-button-container {
    text-align: center; /* Zentriert den Button */
    margin-top: 30px; /* Abstand nach oben zum vorherigen Inhalt */
    margin-bottom: 30px; /* Abstand nach unten zum nächsten Inhalt */
}


/* Diese Regeln wurden als "zu entfernen" markiert, da sie nicht mehr auf der Hauptseite verwendet werden sollen.
   Wenn du sie auf Unterseiten brauchst, verschiebe sie in ein separates Stylesheet für diese Seiten. */
/* ENTFERNT: #portfolio .portfolio-item p { ... } */
/* ENTFERNT: #portfolio .view-project-button { ... } */

/* Neue Regel für Portfolio-Bilder - Behalten */
.portfolio-item img {
    width: 100%;
    height: 250px;
    object-fit: contain;
    display: block;
}

/* Über Mich Sektion - ANGEPASSTE REGELN */
#about h2 {
    margin-bottom: 60px; /* Erhöht den Abstand nach der Sektions-Überschrift "Meine Geschichte" */
    text-align: center;
}

.about-content-combined {
    display: flex;
    flex-direction: row;
    justify-content: left; /* Beibehalten, um es linksbündig zu halten, wenn du es so gelöst hast */
    align-items: flex-start;
    gap: 40px;
    max-width: 1200px; /* Beibehalten oder anpassen, falls du eine andere Breite für den gesamten Block möchtest */
    margin: 0 auto 30px auto;
    flex-wrap: wrap;
}

.profile-photo {
    width: 350px;
    height: 350px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    order: 2;
}

.about-text-content {
    flex-grow: 1;
    max-width: 800px; /* Dies ist die max-width deines Textblocks unter "Meine Geschichte" */
    order: 1;
}

.about-text-content h3 {
    margin-top: 0;
    margin-bottom: 15px; /* Dies ist der Abstand zwischen dem h3 ("Hallo und herzlich willkommen!") und dem ersten Absatz. Dies ist nicht der Abstand nach "Meine Geschichte". */
    font-size: 1.8em;
    color: #333;
}

.about-text-content p {
    margin-bottom: 1em;
    text-align: justify;
    hyphens: auto;
}
/* Versteckt die zusätzlichen Details am Anfang */
#about-details {
    display: none;
    margin-top: 20px;
}

/* Styling für den Button, damit er sich abhebt */
.read-more-btn {
    margin-top: 20px;
    display: block;
    cursor: pointer;
}
/* Portfolio Sektion - Behalten */
.portfolio-categories {
    text-align: center;
    margin-bottom: 30px;
}

.category-button {
    background-color: #eee;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    color: #333;
}

.category-button:hover,
.category-button.active {
    background-color: #ffd700;
    color: #333;
}

.portfolio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* .portfolio-grid .portfolio-item wurde bereits definiert, diese Redundanz kann entfernt werden.
   Die transition-Eigenschaft wird dann direkt im bestehenden .portfolio-item Block hinzugefügt. */
/* ENTFERNT: .portfolio-grid .portfolio-item { transition: all 0.3s ease-in-out; } */

/* Leistungen Sektion - Behalten */
#services ul {
    font-size: 15px;
    list-style: disc inside;
    max-width: 800px;
    margin: 20px; /* Dieser Margin ist relativ zum ul selbst. */
    padding-left: 10px;
    columns: 1; /* Wenn du hier 2 Spalten willst, ändere dies. Aktuell 1 Spalte. */
    column-gap: 30px;
}
#services p {
    font-size: 25px;
}

#services li {
    margin-bottom: 10px;
    font-size: 20px;
}
/* Anpassungen für Leistungen Sektion für die Diashow */
#services .services-content-wrapper {
    display: flex;
    flex-wrap: wrap; /* Erlaubt Umbruch auf kleineren Bildschirmen */
    justify-content: center; /* Zentriert den Inhalt bei Bedarf */
    gap: 40px; /* Abstand zwischen Text und Diashow */
    max-width: 1200px; /* Begrenzt die Breite des Wrappers */
    margin: 0 auto; /* Zentriert den Wrapper innerhalb der Sektion */
    align-items: flex-start; /* Oben ausrichten */
}

#services .services-text-content {
    flex: 2 1 600px; /* Nimmt mehr Platz ein, bricht bei Bedarf um */
    min-width: 300px; /* Mindestbreite für Textblock */
}

.slideshow-container {
    flex: 1 1 350px; /* Bleibt so, da es die Flex-Basis des Containers ist */
    display: flex;
    flex-wrap: wrap;
    gap: 15px; /* Etwas kleinerer Abstand für 4 Bilder */
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    height: 450px; /* Angepasste Höhe für 4 Bilder (2 Reihen à 2 Bilder) */
    padding: 10px; /* Etwas Innenabstand für die Bilder */
    box-sizing: border-box; /* Stellt sicher, dass Padding in der Höhe enthalten ist */
}

.slideshow-item {
    width: calc(50% - 10px); /* 50% Breite minus halber Gap für 2 Bilder pro Reihe */
    max-width: 220px; /* Max. Breite für jedes Bild (anpassen, wenn nötig) */
    height: 200px; /* Angepasste Höhe für jedes Bild */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #f0f0f0;
}


.slideshow-item img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Bild füllt den Bereich aus, schneidet ggf. */
    display: block;
    opacity: 0; /* Standardmäßig unsichtbar, wird per JS eingeblendet */
    transition: opacity 1s ease-in-out; /* Sanfter Übergang beim Ein-/Ausblenden */
}

.slideshow-item img.active {
    opacity: 1; /* Sichtbar, wenn aktiv */
}
/* Prozess Sektion - Behalten */
.process-steps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
}

.process-steps .step {
    flex: 1 1 300px;
    text-align: block; /* 'block' ist kein gültiger Wert für text-align. Meintest du 'left' oder 'justify'?
                           Sollte hier 'left' sein, wenn der Text innerhalb des Schrittes linksbündig sein soll. */
    font-size: 15px;
    padding: 20px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    background-color: transparent;
}

.process-steps .step h3 {
    color: #ffd700;
    margin-top: 0;
}
/* Styling für Prozess-Schritt-Bilder */
.process-step-image {
    max-width: 50%; /* Bild passt sich an die Breite des Schritt-Containers an */
    height: auto; /* Behält das Seitenverhältnis bei */
    display: block; /* Für die Zentrierung */
    margin: 0 auto 0 auto; /* Zentriert das Bild horizontal und gibt Abstand nach oben */
    border-radius: 8px; /* Optional: abgerundete Ecken */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Optional: leichter Schatten */
}

/* Spezifisches Styling für die Zahlungsmodalitäten-Bilder */
/* Nutze die Klasse, da sie mehrfach im HTML vorkommt */
.process-step-image-payment {
    width: 30px; /* Verkleinert die Breite der Bilder (von 10px auf 30px, da 10px SEHR klein ist) */
    height: 30px; /* Verkleinert die Höhe der Bilder */
    /* Die anderen Eigenschaften (display, margin, border-radius, box-shadow)
       werden von .process-step-image-payment übernommen, oder du kannst sie hier explizit neu definieren,
       wenn sie anders sein sollen. */
    margin-top: 5px; /* Kleinerer Rand und etwas mehr Abstand zwischen den Icons */
    display: inline-block; /* Damit sie nebeneinander stehen können, wenn der Text um sie herumfließt */
    vertical-align: middle; /* Für bessere vertikale Ausrichtung mit dem Text */
}
/* Kontakt Sektion - Behalten */
.contact-methods {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    max-width: 900px;
    margin: 0 auto;
}

.contact-form {
    flex: 1 1 400px;
    display: flex;
    flex-direction: column;
}

.contact-form label {
    margin-bottom: 5px;
    font-weight: bold;
}

.contact-form input,
.contact-form textarea {
    padding: 10px;
    margin-bottom: 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 1em;
}

.contact-form button {
    align-self: flex-start;
}

.contact-info {
    flex: 1 1 300px;
}

.social-links {
    list-style: none;
    padding: 0;
    display: flex;
    gap: 15px;
}

.social-links a {
    color: #333;
    text-decoration: none;
    font-weight: bold;
}

.social-links a:hover {
    color: #ffd700;
}

/* Testimonials Sektion (DIESER BLOCK WURDE GELÖSCHT, DA TESTIMONIALS ENTFERNT WURDEN) - Richtig, dieser Kommentar ist gut! */

/* Blog Sektion (optional) - Behalten */
.blog-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.blog-post-preview {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

.blog-post-preview h3 {
    margin-top: 0;
}

.blog-post-preview .post-date {
    font-size: 0.9em;
    color: #777;
}

.blog-post-preview .read-more {
    display: inline-block;
    margin-top: 10px;
    color: #ffd700;
    text-decoration: none;
    font-weight: bold;
}

/* FAQ Sektion (optional) - Behalten */
.faq-items {
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 15px 20px;
    background-color: #f9f9f9;
    border: none;
    border-bottom: 1px solid #eee;
    cursor: pointer;
    text-align: left;
    font-size: 1.1em;
    font-weight: bold;
    color: #333;
    transition: background-color 0.3s ease;
}

.faq-question:hover {
    background-color: #f0f0f0;
}

.faq-question h3 {
    margin: 0;
    font-size: 1.1em;
    color: #333;
}

.faq-icon {
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.faq-question.active .faq-icon {
    transform: rotate(180deg);
}

.faq-answer {
    padding: 0 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out;
    background-color: #fff;
}

.faq-answer.open {
    max-height: 500px;
    padding: 15px 20px;
}

.faq-answer p {
    margin-top: 0;
    padding-bottom: 10px;
}

/* Footer - Behalten */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 30px 20px;
    margin-top: 40px;
    position: relative;
    z-index: 999;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.footer-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 20px;
}

.footer-nav a {
    color: white;
    text-decoration: none;
    font-size: medium;
}

.footer-nav a:hover {
    text-decoration: underline;
}

/* Social Media Icons im Footer - Behalten */
.social-icons {
    margin-top: 10px;
    margin-bottom: 10px;
}

.social-icons a {
    color: white;
    font-size: 1.8em;
    margin: 10px;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #ffd700;
}

/* Rechtliche Sektionen - Behalten */
.legal-section {
    font-size: 0.9em;
    padding: 30px 20px;
    max-width: 1000px;
    margin: 20px auto;
    background-color: rgba(255, 255, 255, 0.95);
    border-radius: 8px;
    box-shadow: 0 0 5px rgba(0,0,0,0.05);
    color: #333;
}
.legal-section h1 {
    font-size: 2.5em;
    text-align: center;
    margin-bottom: 100px;
    color: #444;
}

.legal-section h2 {
    font-size: 1.8em;
    text-align: left;
    margin-bottom: 40px;
    color: #333;
}

.legal-section p {
    margin-bottom: 1em;
}

.legal-section a {
    color: #007bff;
    text-decoration: none;
}

.legal-section a:hover {
    text-decoration: underline;
}

/* Media Queries für Responsiveness - Behalten, da essenziell */
@media (max-width: 768px) {
 /* Generelle Anpassung für den Haupt-Inhaltsbereich */
    body {
        overflow-x: hidden; /* Verhindert horizontale Scrollbalken, die durch überlaufende Elemente entstehen können */
    }
    html, body {
    width: 100%;
    overflow-x: hidden; /* Dies ist oft ein Rettungsanker gegen unerwünschtes horizontales Scrollen */
    }
    /* Stellen Sie sicher, dass Ihr Haupt-Inhalts-Container so aussieht */
    /* Ersetzen Sie '.your-main-container' durch den tatsächlichen Selektor Ihres Haupt-Divs */
    .your-main-container,
    .project-detail-content { /* Falls es für Ihre Detailseite ist */
        max-width: 100%; /* Passt sich der vollen Breite an */
        padding: 0 15px; /* Nur links/rechts Padding, damit es nicht zu eng wird */
        box-sizing: border-box; /* Wichtig, damit Padding nicht die Breite sprengt */
    }
    /* Überprüfen Sie auch das Styling Ihrer Sektionen */
    section { /* Z.B. für #about, #portfolio, #services, etc. */
        padding: 40px 15px; /* Oder 20px 15px, anpassen für Mobile */
        /* Stellen Sie sicher, dass hier keine festen Breiten gesetzt sind */
        width: 100%; /* Wichtig, wenn Sie flex/grid auf Kindern anwenden */
        box-sizing: border-box;
    }

/* Desktop-Navigation auf Mobilgeräten ausblenden */
    .main-header nav ul {
        display: none; /* Standardmäßig ausblenden */
        position: fixed; /* Fixiert das Menü am Bildschirm */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* Deckt den gesamten Bildschirm ab */
        background-color: rgba(0, 0, 0, 0.95); /* Semi-transparenter Hintergrund */
        flex-direction: column; /* Links untereinander */
        justify-content: center;
        align-items: center;
        z-index: 1000;
        overflow-y: auto;
    }

    /* Mobile Navigation anzeigen, wenn die Klasse 'active' gesetzt ist (durch JS) */
    .main-header nav ul.active {
        display: flex; /* Mobile Navigation anzeigen */
    }

    /* Hamburger-Icon auf Mobilgeräten anzeigen */
    .menu-toggle {
        display: block; /* Hamburger-Icon anzeigen */
    }

    /* Anpassung der Navigations-Elemente im mobilen Menü */
    .main-header nav ul li {
        margin: 15px 0; /* Mehr vertikaler Abstand */
    }
    .main-header nav ul li a {
        font-size: 1.5em; /* Größere Schrift für bessere Bedienbarkeit */
        padding: 10px 0;
        display: block;
    }

    nav ul li {
        margin: 10px 0;
    }

    .nav-logo-left, .nav-logo-right {
        position: static;
        transform: none;
        margin: 10px auto;
        height: 50px;
        max-width: 100%; /* Sicherstellen, dass Logos nicht zu groß werden */
        width: auto; /* Breite automatisch anpassen */
    }
/* Optional: Wenn Sie das rechte Logo auf Mobile ausblenden wollen */
    .nav-logo-right {
        display: none;
    }

    .hero-section {
        padding: 60px 20px;
    }

    .hero-section h1 {
        font-size: 2.2em;
    }

    .hero-section p {
        font-size: 1em;
    }

    /* Über Mich Sektion - Mobile Anpassungen */
    .about-content-combined {
        flex-direction: column;
        align-items: center;
        gap: 20px;
    }

    .profile-photo {
        width: 200px;
        height: 200px;
        order: 1;
        margin-bottom: 20px;
    }

    .about-text-content {
        order: 2;
        max-width: 100%;
        text-align: center;
    }

    .about-text-content h3 {
        text-align: center;
    }

    .about-text-content p {
        text-align: left;
        hyphens: none;
    }

    .portfolio-grid {
        grid-template-columns: 1fr;
    }

    #services ul {
        columns: 1;
    }
    
    #services .services-content-wrapper {
        flex-direction: column; /* Stapelt Text und Diashow untereinander */
        align-items: center;
    }

    .slideshow-container {
        height: 400px; /* Kleinere Höhe für mobile Ansicht */
        gap: 10px;
    }

    .slideshow-item {
        width: calc(50% - 10px); /* Weiterhin 2 Bilder pro Reihe auf kleineren Bildschirmen */
        max-width: 150px; /* Anpassung der Max-Breite für mobile Ansicht */
        height: 180px; /* Anpassung der Höhe für mobile Ansicht */
    }

    .process-steps .step {
        flex: 1 1 100%;
    }
   .process-step-image {
        margin-top: 15px; /* Etwas weniger Abstand auf Mobilgeräten */
    }

    .process-step-image-payment {
        width: 50px; /* Etwas kleinere Größe für mobile Geräte */
        height: 50px;
        margin-top: 8px;
    }
    .contact-methods {
        flex-direction: column;
    }

    .contact-form,
    .contact-info {
        flex: 1 1 100%;
    }

    .footer-content {
        flex-direction: column;
        gap: 15px;
    }

    .footer-nav ul {
        flex-direction: column;
        gap: 10px;
    }
}