* {
     box-sizing: border-box;
     /* font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, sans-serif; */
     font-family: monospace;
 }

 html,
 body {
     min-height: 100%;
     margin: 0;
 }

 body {
     height: 100dvh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     /* background: radial-gradient(circle at top, #1a1a1a, #0d0d0d); */
     background: #0d0d0d;
     color: #f5f5f7;
     opacity: 0;
     animation: fadeInOpacity 1.8s ease-in-out forwards;
 }

 @keyframes fadeInOpacity {
     from {
         opacity: 0;
     }

     to {
         opacity: 1;
     }
 }

 h1 {
     font-weight: 500;
     letter-spacing: -0.5px;
     margin-bottom: 40px;
     text-shadow: 0 2px 10px rgba(255, 255, 255, 0.05);
 }

 form {
     display: flex;
     width: 90%;
     max-width: 500px;
     border-radius: 40px;
     background: rgba(255, 255, 255, 0.08);
     background: #1a1a1a;
     padding: 7px 7px 7px 17px;
     backdrop-filter: blur(15px);
     box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
     transition: all 0.3s ease;

 }

 form:focus-within {
     background: rgba(255, 255, 255, 0.11);
     background: #222222ff;
     box-shadow: -2px 0 20px rgba(255, 182, 193, 0.25);
     box-shadow: 0px 10px 40px 2px rgba(0, 0, 0, 0.5);
     /* sehr dezenter rosafarbener Glow */
     transform: scale(1.03);
 }

 input[type="text"] {
     flex: 1;
     border: none;
     outline: none;
     font-size: 18px;
     padding: 10px;
     background: transparent;
     color: #fff;
     transition: box-shadow 0.3s ease, padding-left 0.1s ease;
 }

 form.active input[type="text"] {
     padding-left: 50px;
 }

 input::placeholder {
     color: #d8b6bb;
     /* heller pastell-rosa Ton im Placeholder */
 }

 form:focus-within input::placeholder {
     /* display: none !important;
            visibility: hidden !important; */
     opacity: 0 !important;
     transition: opacity 0.3s ease;
 }

 button {
     border: none;
     background: linear-gradient(90deg, #e8aab8, #ecbac4);
     /* zartes Pastellrosa */
     color: #4d2c35;
     padding: 12px 24px;
     border-radius: 30px;
     font-size: 16px;
     cursor: pointer;
     transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.3s ease;
     border-top-left-radius: 8px;
     border-bottom-left-radius: 8px;
     padding-left: 17px;
     padding-right: 20px;
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     right: 5px;
 }

 button:hover {
     background: linear-gradient(90deg, #ecbac4, #f1cbd1);
     transform: translateY(-54%);
     /* box-shadow: 0 0 15px rgba(235, 182, 193, 0.5); */
 }

 form div.nav {
     width: 100%;
     text-align: center;
     position: absolute;
     bottom: -30px;
     left: 50%;
     transform: translate(-50%, -50%);
     transition: opacity 0.3s ease, transform 0.3s ease;
 }

 form:focus-within div.nav {
     opacity: 0;
     transform: translate(-50%, -20%);
     transition: opacity 0.3s ease, transform 0.3s ease;
 }

 form div a {
     color: #d8b6bb;
     text-decoration: none;
     font-size: 11px;
     /* line-height: 1.4em; */
     opacity: 0.5;
     margin: 0 5px;
     transition: opacity 0.3s ease;
 }



 form #searchengineicon {
     opacity: 0;
     transition: opacity 1s ease;
 }


 form.active #searchengineicon {
     position: absolute;
     left: 10px;
     top: 50%;
     transform: translateY(-50%);
     height: 47px;
     width: 47px;
     opacity: 1;
     border: none;
     /* background: linear-gradient(90deg, #e8aab8, #ecbac4); */
     background: #1a1a1a;
     /* zartes Pastellrosa */
     color: #4d2c35;
     padding: 0;
     border-radius: 30px;
     font-size: 16px;
     cursor: pointer;
     transition: opacity 0.3s ease, transform 0s;
 }

 form:focus-within.active #searchengineicon {
     background-color: #2A2A2A;
     background-color: #6b6b6bff;
 }


 form.active #searchengineicon #engic {
     width: 100%;
     height: 100%;
     /* background-image: url('icons/y.png'); */
     position: absolute;
     top: 0;
     background-size: contain;
     background-repeat: no-repeat;
     background-position: center;
 }


 header {
     position: absolute;
     top: 20px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 13px;
     color: #888;
     color: #d8b6bbe1;
     padding: 5px;
     border-radius: 3px;
     opacity: 0;
     animation: fadeInOpacity 2.8s ease-in-out forwards;
 }

 footer {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     font-size: 13px;
     color: #888;
     color: #d8b6bbe1;
     padding: 5px;
     border-radius: 3px;
     opacity: 0;
     animation: fadeInOpacity 2.8s ease-in-out forwards;
 }

 @media (prefers-color-scheme: dark) {
     html {
         background: #0d0d0d;
     }
 }