:root{
    --bg-main:#f4efe9;
    --bg-panel:#fbf8f4;
    --text-main:#5a3a1e;
    --text-soft:#7a5a3a;
    --accent:#a47148;
    --border:#e1d6cb;
}

/* =====================
   Basis
   ===================== */
*{ box-sizing:border-box; }

body{
    margin:0;
    min-height:100vh;
    font-family:"Segoe UI", system-ui, sans-serif;
    color:var(--text-main);

    /* Papier / Leinen Look + Logo-Wasserzeichen */
    background:
        linear-gradient(rgba(244,239,233,.93), rgba(244,239,233,.93)),
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,.03),
            rgba(255,255,255,.03) 1px,
            rgba(0,0,0,.02) 2px,
            rgba(0,0,0,.02) 3px
        ),

    background-repeat:no-repeat;
    background-position:center;
    background-size:65%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
}

body::before{
    content:"";
    position:absolute;
    inset:0;
    background:url("media/logo.png") center center no-repeat;
    background-size:60%;
    opacity:0.18;              /* Transparenz fein justierbar */
    z-index:0;
    pointer-events:none;
}

/* =====================
   Fade-In Animation
   ===================== */
@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* =====================
   Container
   ===================== */
.container{
    position:relative;
    z-index:1;
}

/* =====================
   Typografie
   ===================== */
h1{
    margin:0 0 10px 0;
    font-size:34px;
    font-weight:600;
}

h2{
    margin:0 0 22px 0;
    font-size:20px;
    font-weight:400;
    color:var(--text-soft);
}

.divider{
    width:120px;
    height:2px;
    background:var(--accent);
    margin:26px auto;
    border-radius:2px;
}

/* =====================
   Status Badge
   ===================== */
.status{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:14px 22px;
    border-radius:999px;
    background:rgba(164,113,72,.12);
    border:1px dashed rgba(164,113,72,.45);
    font-size:15px;
}

.dot{
    width:10px;
    height:10px;
    background:var(--accent);
    border-radius:50%;
    box-shadow:0 0 0 6px rgba(164,113,72,.18);
}

/* =====================
   Social Icons
   ===================== */
.social{
    margin-top:34px;
    display:flex;
    justify-content:center;
    gap:18px;
}

.social a{
    width:48px;
    height:48px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.25s ease;
}

/* Instagram – präsenter */
.social a.instagram{
    background:linear-gradient(
        45deg,
        #f09433,
        #e6683c,
        #dc2743,
        #cc2366,
        #bc1888
    );
    box-shadow:0 8px 18px rgba(204,35,102,.45);
}

.social a.instagram svg{
    fill:#ffffff;
}

/* Hover */
.social a:hover{
    transform:translateY(-4px) scale(1.05);
}

.social img{
    width:33px;
    height:33px;
    object-fit:contain;
    pointer-events:none;
}

/* =====================
   Footer
   ===================== */
.footer{
    margin-top:36px;
    font-size:13px;
    color:var(--text-soft);
}

/* =====================
   Responsive
   ===================== */
@media(max-width:700px){
    body{ background-size:90%; }
    .container{ padding:34px 26px; }
    h1{ font-size:26px; }
}