* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        :root {
            --green: #24452f;
            --gold: #c39a45;
            --light: #fafaf8;
            --text: #2d2d2d;
            --grey: #777;
            --shadow: 0 10px 35px rgba(0, 0, 0, .08);
            --radius: 18px;
            --width: 1200px;
        }

        body {
            font-family: "Segoe UI", Helvetica, Arial, sans-serif;
            background: var(--light);
            color: var(--text);
            line-height: 1.6;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        img {
            display: block;
            width: 100%;
        }

        .container {
            width: min(92%, var(--width));
            margin: auto;
        }

        /* =======================================================
           HEADER
        ======================================================= */

        header {
            background: white;
            border-bottom: 1px solid #ececec;
        }

        .header {
            height: 90px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .logo {
            font-size: 2rem;
            font-weight: 700;
            color: var(--green);
        }
		.logo_link {
			text-decoration: none;
		}

        nav ul {
            display: flex;
            gap: 35px;
            list-style: none;
        }

        nav a {
            font-weight: 600;
            transition: .25s;
        }

        nav a:hover {
            color: var(--gold);
        }

        /* =======================================================
           HERO
        ======================================================= */

        .hero {
            padding: 80px 0;
        }

        .hero-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            // gap: 70px;
            // align-items: center;
        }

        .hero h1 {
            font-size: 3rem;
            line-height: 1.1;
            margin-bottom: 30px;
			margin-right: 20px;
            color: var(--green);
        }

        .hero p {
            font-size: 1.2rem;
            color: var(--grey);
            margin-bottom: 40px;
            max-width: 520px;
        }

        .button {
            display: inline-block;
            background: var(--green);
            color: white;
            padding: 16px 34px;
            border-radius: 50px;
            font-weight: bold;
            transition: .25s;
        }

        .button:hover {
            background: #2f5b3e;
        }

        .hero-image img {
            border-radius: 24px;
            box-shadow: var(--shadow);
			margin-top: 15px;
        }

        /* =======================================================
           INFO BOXES
        ======================================================= */

        section {
            padding: 0px 0;
        }

        .section-title {
            text-align: center;
            font-size: 2.3rem;
            color: var(--green);
            margin-bottom: 20px;
        }

        .section-text {
            max-width: 750px;
            margin: auto;
            text-align: center;
            color: var(--grey);
        }

		.cards {
		    display: grid;
		    grid-template-columns: repeat(3, 1fr);
		    gap: 25px;
		    margin-top: 50px;
		}

		.card {
		    background: #fff;
		    border-radius: var(--radius);
		    padding: 35px 25px;
		    text-align: center;
		    box-shadow: var(--shadow);
		    transition: .25s;
		}

        .card h3 {
            color: var(--green);
            margin-bottom: 15px;
        }

		.icon {
		    width: 92px;
		    height: 92px;
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    margin: 0 auto 25px;
		    border-radius: 50%;
		    background: #edf4ef;
		    border: 1px solid #dde9df;
		    color: #24452f;
		    transition: .25s;
		}
		.icon svg {
		    width: 42px;
		    height: 42px;
		}

        /* =======================================================
           RESPONSIVE
        ======================================================= */

        @media (max-width: 900px) {

            .header {
                flex-direction: column;
                height: auto;
                padding: 25px 0;
                gap: 20px;
            }

            nav ul {
                flex-wrap: wrap;
                justify-content: center;
                gap: 20px;
            }

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

            .hero {
                text-align: center;
            }

            .hero h1 {
                font-size: 2.8rem;
            }

            .hero p {
                margin-left: auto;
                margin-right: auto;
            }

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

        }

		#loginOverlay {
		    position: fixed;
		    inset: 0;
		    display: none;
		    justify-content: center;
		    align-items: center;
		    background: rgba(0,0,0,.55);
		    z-index: 9999;
		}

		#loginWindow {
		    width: 90%;
		    max-width: 420px;
		    background: #ffffff;
		    border-radius: 16px;
		    box-shadow: 0 20px 50px rgba(0,0,0,.25);
		    overflow: hidden;
		}

		#loginHeader {
		    background: #24452f;
		    color: white;
		    padding: 20px;
		    font-size: 1.4rem;
		    font-weight: bold;
		}

		#loginBody {
		    padding: 30px;
		}

		#loginBody label {
		    display: block;
		    margin-bottom: 6px;
		    font-weight: 600;
		}

		#loginBody input {
		    width: 100%;
		    padding: 12px;
		    margin-bottom: 20px;
		    border: 1px solid #cccccc;
		    border-radius: 8px;
		    font-size: 1rem;
		}

		#loginFooter {
		    display: flex;
		    justify-content: flex-end;
		    gap: 12px;
		    padding: 20px 30px 30px;
		}

		.loginButton {
		    padding: 12px 24px;
		    border: none;
		    border-radius: 30px;
		    cursor: pointer;
		    font-size: 1rem;
		}

		.loginCancel {
		    background: #dddddd;
		}

		.loginSubmit {
		    background: #24452f;
		    color: white;
		}

		.loginSubmit:hover {
		    background: #2d5b3d;
		}

		footer {
		    margin-top: 60px;
		    background: #18261d;
		    color: #ffffff;
		}

		.footer {
		    display: grid;
		    grid-template-columns: repeat(3, 1fr);
		    gap: 40px;
		    padding: 40px 0;
		    text-align: center;
		}

		.footer h3 {
		    margin-bottom: 12px;
		    font-size: 1.15rem;
		    color: #ffffff;
		}

		.footer p,
		.footer li {
		    color: rgba(255,255,255,.75);
		    line-height: 1.6;
		    font-size: .95rem;
		}

		.footer ul {
		    list-style: none;
		}

		.footer li {
		    margin-bottom: 6px;
		}

		.footer a {
		    color: rgba(255,255,255,.75);
		    text-decoration: none;
		    transition: color .25s;
		}

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

		.footer-bottom {
		    border-top: 1px solid rgba(255,255,255,.10);
		    text-align: center;
		    padding: 15px 0;
		    font-size: .85rem;
		    color: rgba(255,255,255,.55);
		}
		/* ==========================================================
		   DROPDOWN MENU
		========================================================== */

		.login-menu {
		    position: relative;
		}

		.dropdown {
		    position: absolute;
		    top: 100%;
		    right: 0;
		    display: none;
		    background: #fff;
		    min-width: 180px;
		    border-radius: 12px;
		    box-shadow: 0 12px 30px rgba(0,0,0,.15);
		    overflow: hidden;
		    z-index: 1000;
		}

		.login-menu:hover > .dropdown {
		    display: block;
		}

		.dropdown li {
		    margin: 0;
		}

		.dropdown a {
		    display: block;
		    padding: 12px 20px;
		    color: #333333;
		    white-space: nowrap;
		}

		.dropdown a:hover {
		    background: #f3f3f3;
		    color: #24452f;
		}

		
		
		.postby {
		    display: flex;
		    gap: 15px;
		    align-items: flex-end;
		    flex-wrap: wrap;
		    margin-top: 15px;
		}

		.postnr {
		    width: 120px;
		    flex-shrink: 0;
		}
		.bynavn {
		    flex: 1;
		    min-width: 250px;
		}
		.postnr label,
		.bynavn label {
		    display: block;
		    margin-bottom: 5px;
		}
		.postnr input,
		.bynavn input {
		    width: 100%;
		    box-sizing: border-box;
		}
		
		/* ==========================================================
		   TERMS
		========================================================== */


		.terms-group {
		    margin-top: 20px;
			margin-left: 30px;
		    padding-left: 4px;
		}

		.checkbox-label {
		    display: flex;
		    align-items: flex-start;
		    gap: 12px;
		    margin: 0;
		}

		.checkbox-label input[type="checkbox"] {
		    margin: 3px 0 0 0;
		    flex: 0 0 18px;
		}

		.checkbox-label span {
		    flex: 1;
		    line-height: 1.6;
		}
		
		/* Mobil */
		@media (max-width: 600px) {

		    .postnr,
		    .bynavn {
		        width: 100%;
		        min-width: 100%;
		    }
		}
		
		.medd_container {
		    display: flex;
		    justify-content: center;   
		    align-items: center;       
		    min-height: 40vh;         
		}
		.medd_centerBox {
		    padding: 20px;
		    border: 1px solid #ccc;
		    background: #fff;
			text-align: center;
		}

		

		@media (max-width:900px) {

		    .footer {
		        grid-template-columns: 1fr;
		        gap: 30px;
		        padding: 35px 20px;
		    }

		}