body { font-family: Arial, sans-serif; background-color: #f4f4f9; color: #333; display: flex; justify-content: center; /* Horizontale Zentrierung */ align-items: center; /* Vertikale Zentrierung */ height: 100vh; margin: 0; } .container { text-align: center; max-width: 400px; width: 90%; background: #fff; padding: 20px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; align-items: center; /* Zentriert die Links im Container */ } h1 { font-size: 24px; margin-bottom: 20px; } .link { display: flex; /* Flexbox für den Link */ align-items: center; /* Vertikale Ausrichtung von Bild und Text */ margin: 10px 0; padding: 10px; background: #007BFF; color: white; text-decoration: none; border-radius: 5px; transition: background 0.3s ease; width: 100%; /* Link nimmt die volle Breite im Container ein */ justify-content: center; /* Zentriert den Text horizontal im Link */ } .link:hover { background: #0056b3; } .link img { width: 20px; /* Größe des Logos */ height: 20px; /* Höhe des Logos */ margin-right: 8px; /* Abstand zwischen Logo und Text */ } .message { background: #f9f9f9; padding: 10px; margin: 10px 0; border-radius: 5px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .message strong { font-size: 16px; color: #007BFF; } .message p { margin: 5px 0; } .message small { color: #666; font-size: 12px; } form { display: flex; flex-direction: column; gap: 10px; } form input, form textarea { width: 100%; padding: 10px; border: 1px solid #ccc; border-radius: 5px; } form button { padding: 10px; background: #007BFF; color: white; border: none; border-radius: 5px; cursor: pointer; transition: background 0.3s; } form button:hover { background: #0056b3; }