body {
            margin: 0;
             background-image: url('hg4.webp');
            background-attachment: fixed;
            background-size: cover;
            color: #333;
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            align-items: center;
        }

        .menu {
            cursor: pointer !important;
            display: flex;
            justify-content: space-around;
            background-color: #bedac7;
            height: 40px;
            color: #223650 !important;
            padding: 0;
            position: fixed;
            top: 0px;
            width: 100%;
            z-index: 1000;
            font-size: 1.2em;
            box-shadow:  5px 5px 12px #f8faf9;
            text-shadow: 3px 3px 2px #c2c3cf;
                        font-family: "Lobster", cursive;
        }
        .container:focus {
            outline: none;
        }
.tit { width: 100%;display: flex; flex-direction: column ;}
.bei { display: flex; }
.inp > div {     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); margin-top: 5px;
               color:black; font-size: 1.1em; text-align: left;
               font-weight: 300 !important;
             }
        .ueb { display:flex; justify-content: space-around; } 

        .menu a {
            margin: 0;
            text-decoration: none;
            font-size: 1.2em;
            font-weight: bold;
        }

        .menu a:hover {
            filter: invert(1); /* Etwas dunklerer Kontrast */
        }

        .container {
            background: transparent;
            max-width: 800px;
            text-align: ledt;
            margin-top: 40px; /* Inhalte beginnen direkt unter dem Menü */
            width: 100%;
        }

        .content-section {
            position: relative;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 15px;
            padding: 20px;
            margin: 15px auto;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            text-align: left;
            max-width: 100%;
            font-family: "Lobster", cursive;

        }

        .card {
            position: relative;
            background-color: rgba(255, 255, 255, 0.8);
            border-radius: 15px;
            padding: 20px;
            margin: 15px auto;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            text-align: left;
            max-width: 100%;
            font-family: "Lobster", cursive;

        }


        .card h2 {
            margin-bottom: 15px;
            font-size: 1.5em;
            color: #555;
        }
        .footer {
            text-align: center;
            padding: 10px;
            background-color: rgba(255, 255, 255, 0.9);
            position: fixed;
            bottom: 0;
            width: 100%;
            font-family: "Roboto", sans-serif;
            font-size: 1em;
            color: #555;
        }

        .footer a {
            text-decoration: none;
            color: #555;
        }

        .footer a:hover {
            color: #000;
        }

        @media (max-width: 600px) {
            .container { width: 100vw; font-weight: 650 !important;}
            .beim { width: 100% !important;}
            .card {
                padding: 5px !important; 
                width: 99% !important;
            }

            .caard h1 {
                font-size: 1em;
            }
            .menu { font-size: 1em;}
            .inp { display: block; }

        }
    .bein { width:89%;  }
    .beim { width:89%}
    #aut {width:  80%}
    b { width:170px; text-align: right; color:#148181 !important;} 
    .inp { margin-top: 5px;}
    .inp b { color:#0d7777 !important;}
    .omg img{  max-width: 90% !important;}