/* Grundlegendes Styling */
#hint-layer {
    position: fixed;
    top: -30px; /* Start außerhalb des sichtbaren Bereichs */
    left: 50%;
    transform: translateX(-50%);
    z-index: 1000;
    max-width: 90%;
    padding: 10px 20px;
    border-radius: 0 0 25px 25px;
    font-size: 16px;
    text-align: center;
    opacity: 0;
    transition: top 0.5s ease, opacity 0.5s ease;
}

/* Typen von Nachrichten */
.hint-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.hint-error, .hint-red {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}
.hint-orange {
    background-color:orange;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Sichtbar machen */
#hint-layer.show {
    top: 0px; /* Im sichtbaren Bereich */
    opacity: 1;
}
#editInvoiceContainer {
    margin-top: 20px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #f9f9f9;
}


:root {
    --white: #FAFCF2;
    --darkmode-white: #FAFCF2;
    --darkmode-black: #021502;
  }
  @font-face {
    font-family: 'xesel';
    src: url('../fonts/Edition-International70.eot');
    src: url('../fonts/Edition-International70.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Edition-International70.woff2') format('woff2'),
        url('../fonts/Edition-International70.woff') format('woff'),
        url('../fonts/Edition-International70.ttf') format('truetype'),
        url('../fonts/Edition-International70.svg#Edition-International70') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body{
    padding: 0;
    margin: 0;
    scroll-behavior: smooth; /* Weiches Scrollen */
    background-color: #b2dfdb;
}
html, body {
    max-width: 100%;
    overflow-x: hidden !important;
    font-family: 'xesel', sans-serif;
    scroll-behavior: smooth;
}
section {
    display: none;
    width: 90%;
    background-color: white;
    margin: 5% auto;
    padding: 5%;
}

h1{ 
    font-size: calc(40px + (40 - 40) * ((100vw - 700px) / (1600 - 700)));
    line-height: calc(44px + (44 - 44) * ((100vw - 700px) / (1600 - 700)));
}
h2{ 
    font-size: calc(20pt + (25 - 20) * ((100vw - 700px) / (1600 - 700)));
    line-height: calc(22pt + (27 - 22) * ((100vw - 700px) / (1600 - 700)));
}
h3{ 
    font-size: calc(30px + (60 - 30) * ((100vw - 700px) / (1600 - 700)));
    line-height: calc(33px + (63 - 33) * ((100vw - 700px) / (1600 - 700)));}

p, header{ 
    font-size: calc(20px + (20 - 20) * ((100vw - 700px) / (1600 - 700))) !important;
    line-height: calc(22px + (22 - 22) * ((100vw - 700px) / (1600 - 700)));
}


/* Hover-Effekt nur auf Text */
.nav-link .nav-text ,.nav-text{
    display: inline-block; /* Für Transform-Effekt */
    transition: transform 0.2s ease-in-out; /* Sanfter Übergang */
}

.nav-link:hover .nav-text, .nav-text:hover{
    transform: scale(1.05); /* Text skalieren */
}

.nav-link {
    color: #333; /* Standardfarbe */
    transition: color 0.3s ease; /* Sanfte Hover-Übergänge */
}

.nav-link:hover {
    color: #0056b3; /* Hover-Farbe */
}

#mainHeader {
    position: fixed; /* Fixiert das Menü am oberen Rand */
    width: 100%;
    z-index: 50;
    background-color: transparent;
}


/* scroll-margin-top: 60px; Platz für den Header bei Anker-Scrollen */

input:-internal-autofill-selected {
    background-color: white !important;
}

#about h2, #team h2, #collection h2{
    padding: 150px 200px;
}

/* Animation für das Hochsliden */
@keyframes slideUp {
    0% {
        transform: translateY(10%);
        opacity: 0;
    }
    90% {
        transform: translateY(10%);
        opacity: 0;
    }
    100% {
        transform: translateY(0%);
        opacity: 1;
    }
}

/* Klasse für die Animation */
.slide-up {
    animation: slideUp 5s ease-out forwards; /* 1.5s Animationsdauer */
}

.section-tab{
    height:30px;
    line-height: 27px;
}


section {
    display: none;
}

#home { /* Beispiel für den Startabschnitt */
    display: block;
}






body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}





/* Anpassung MOBILE
   On screens that are 992px or less,
   set the background color to blue
*/
@media screen and (max-width: 768px) {
    
   


  }



/* Orange Farben */
.bg-orange-50 { background-color: #fff7ed; }
.bg-orange-100 { background-color: #ffedd5; }
.bg-orange-200 { background-color: #fed7aa; }
.bg-orange-300 { background-color: #fdba74; }
.bg-orange-400 { background-color: #fb923c; }
.bg-orange-500 { background-color: #f97316; }
.bg-orange-600 { background-color: #ea580c; }
.bg-orange-700 { background-color: #c2410c; }
.bg-orange-800 { background-color: #9a3412; }
.bg-orange-900 { background-color: #7c2d12; }

.text-orange-50 { color: #fff7ed; }
.text-orange-100 { color: #ffedd5; }
.text-orange-200 { color: #fed7aa; }
.text-orange-300 { color: #fdba74; }
.text-orange-400 { color: #fb923c; }
.text-orange-500 { color: #f97316; }
.text-orange-600 { color: #ea580c; }
.text-orange-700 { color: #c2410c; }
.text-orange-800 { color: #9a3412; }
.text-orange-900 { color: #7c2d12; }

.border-orange-50 { border-color: #fff7ed; }
.border-orange-100 { border-color: #ffedd5; }
.border-orange-200 { border-color: #fed7aa; }
.border-orange-300 { border-color: #fdba74; }
.border-orange-400 { border-color: #fb923c; }
.border-orange-500 { border-color: #f97316; }
.border-orange-600 { border-color: #ea580c; }
.border-orange-700 { border-color: #c2410c; }
.border-orange-800 { border-color: #9a3412; }
.border-orange-900 { border-color: #7c2d12; }

/* Teal Farben */
.bg-teal-50 { background-color: #f0fdfa; }
.bg-teal-100 { background-color: #ccfbf1; }
.bg-teal-200 { background-color: #99f6e4; }
.bg-teal-300 { background-color: #5eead4; }
.bg-teal-400 { background-color: #2dd4bf; }
.bg-teal-500 { background-color: #14b8a6; }
.bg-teal-600 { background-color: #0d9488; }
.bg-teal-700 { background-color: #0f766e; }
.bg-teal-800 { background-color: #115e59; }
.bg-teal-900 { background-color: #134e4a; }

.text-teal-50 { color: #f0fdfa; }
.text-teal-100 { color: #ccfbf1; }
.text-teal-200 { color: #99f6e4; }
.text-teal-300 { color: #5eead4; }
.text-teal-400 { color: #2dd4bf; }
.text-teal-500 { color: #14b8a6; }
.text-teal-600 { color: #0d9488; }
.text-teal-700 { color: #0f766e; }
.text-teal-800 { color: #115e59; }
.text-teal-900 { color: #134e4a; }

.border-teal-50 { border-color: #f0fdfa; }
.border-teal-100 { border-color: #ccfbf1; }
.border-teal-200 { border-color: #99f6e4; }
.border-teal-300 { border-color: #5eead4; }
.border-teal-400 { border-color: #2dd4bf; }
.border-teal-500 { border-color: #14b8a6; }
.border-teal-600 { border-color: #0d9488; }
.border-teal-700 { border-color: #0f766e; }
.border-teal-800 { border-color: #115e59; }
.border-teal-900 { border-color: #134e4a; }

/* Amber Farben */
.bg-amber-50 { background-color: #fffbeb; }
.bg-amber-100 { background-color: #fef3c7; }
.bg-amber-200 { background-color: #fde68a; }
.bg-amber-300 { background-color: #fcd34d; }
.bg-amber-400 { background-color: #fbbf24; }
.bg-amber-500 { background-color: #f59e0b; }
.bg-amber-600 { background-color: #d97706; }
.bg-amber-700 { background-color: #b45309; }
.bg-amber-800 { background-color: #92400e; }
.bg-amber-900 { background-color: #78350f; }

.text-amber-50 { color: #fffbeb; }
.text-amber-100 { color: #fef3c7; }
.text-amber-200 { color: #fde68a; }
.text-amber-300 { color: #fcd34d; }
.text-amber-400 { color: #fbbf24; }
.text-amber-500 { color: #f59e0b; }
.text-amber-600 { color: #d97706; }
.text-amber-700 { color: #b45309; }
.text-amber-800 { color: #92400e; }
.text-amber-900 { color: #78350f; }

.border-amber-50 { border-color: #fffbeb; }
.border-amber-100 { border-color: #fef3c7; }
.border-amber-200 { border-color: #fde68a; }
.border-amber-300 { border-color: #fcd34d; }
.border-amber-400 { border-color: #fbbf24; }
.border-amber-500 { border-color: #f59e0b; }
.border-amber-600 { border-color: #d97706; }
.border-amber-700 { border-color: #b45309; }
.border-amber-800 { border-color: #92400e; }
.border-amber-900 { border-color: #78350f; }

/* Cyan-Grey Farben */
.bg-cyan-grey-50 { background-color: #f0f5f9; }
.bg-cyan-grey-100 { background-color: #d9e2ec; }
.bg-cyan-grey-200 { background-color: #bcccdc; }
.bg-cyan-grey-300 { background-color: #9fb3c8; }
.bg-cyan-grey-400 { background-color: #829ab1; }
.bg-cyan-grey-500 { background-color: #627d98; }
.bg-cyan-grey-600 { background-color: #486581; }
.bg-cyan-grey-700 { background-color: #334e68; }
.bg-cyan-grey-800 { background-color: #243b53; }
.bg-cyan-grey-900 { background-color: #102a43; }

.text-cyan-grey-50 { color: #f0f5f9; }
.text-cyan-grey-100 { color: #d9e2ec; }
.text-cyan-grey-200 { color: #bcccdc; }
.text-cyan-grey-300 { color: #9fb3c8; }
.text-cyan-grey-400 { color: #829ab1; }
.text-cyan-grey-500 { color: #627d98; }
.text-cyan-grey-600 { color: #486581; }
.text-cyan-grey-700 { color: #334e68; }
.text-cyan-grey-800 { color: #243b53; }
.text-cyan-grey-900 { color: #102a43; }

.border-cyan-grey-50 { border-color: #f0f5f9; }
.border-cyan-grey-100 { border-color: #d9e2ec; }
.border-cyan-grey-200 { border-color: #bcccdc; }
.border-cyan-grey-300 { border-color: #9fb3c8; }
.border-cyan-grey-400 { border-color: #829ab1; }
.border-cyan-grey-500 { border-color: #627d98; }
.border-cyan-grey-600 { border-color: #486581; }
.border-cyan-grey-700 { border-color: #334e68; }
.border-cyan-grey-800 { border-color: #243b53; }
.border-cyan-grey-900 { border-color: #102a43; }