/* fkmedia – zentriert, Text links, QR+Kontakt unten bündig */

:root{
    --bg:#ffffff;
    --ink:#0f172a;
    --muted:#64748b;
    --accent:#8c2cab;   /* Lila */
    --accent-2:#a76bcf; /* Hover */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
    color:var(--ink);
    /* Neuer, interessanter Hintergrund */
    background: linear-gradient(135deg, #faf5ff 0%, #eef2ff 55%, #ffffff 100%);
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    overflow-x:hidden;
}


/* ZENTRIERUNG & KEIN LEER-SCROLL:
   4 Zeilen Grid: Logo | Text | flex-Spacer | unten (QR+Kontakt) */
.wrap{
    width:min(760px, 92vw);
    min-height: 100svh;             /* nutzt die "kleine" Viewport-Höhe -> kein Phantom-Scroll */
    margin-inline:auto;
    display:grid;
    grid-template-rows: auto auto 1fr auto;
    row-gap: clamp(10px, 3vh, 22px);
    padding: clamp(20px, 5vh, 40px) 0;
    justify-items: center;          /* Logo & unten zentriert */
}

/* Logo mittig */
.logo{
    width: clamp(140px, 26vw, 260px);
    height:auto;
    border-radius: 18px;
    display:block;
}

/* Textspalte: linksbündig, aber mittig in der Seite */
.info{
    width:min(620px, 92%);
    text-align:center;
}

/* Typografie – leicht „formatiert“ */
.name{
    margin: .4rem 0 .1rem;
    font-size: clamp(2rem, 5vw, 2.8rem);
    line-height:1.1;
    letter-spacing:.2px;
}
.role{
    margin:0 0 .8rem 0;
    font-weight:900;
    font-size: clamp(1.2rem, 3.2vw, 1.5rem);
    letter-spacing:.3px;
    position:relative;
}
.role::after{
    content:"";
    display:block;
    width: 64px; height: 3px;
    margin-top: .5rem;
    margin-inline: auto; /* <— neu */
    background: linear-gradient(90deg, var(--accent), var(--accent-2));
    border-radius: 3px;
}

.claim{
    margin:.6rem 0 .15rem 0;
    font-weight:800;
    letter-spacing:.2px;
}
.subclaim{
    margin:.15rem 0 0 0;
    color:var(--muted);
}

/* Spacer füllt den Rest (damit .bottom wirklich unten sitzt) */
.spacer{ min-height: 0 }

/* Unten-Bereich */
.bottom{
    width:min(620px, 92%);
    display:grid;
    justify-items:center;  /* QR mittig */
    row-gap: .6rem;
    padding-bottom: clamp(8px, 2vh, 14px); /* kleiner Atem unten */
}

.qr img{
    width: clamp(160px, 36vw, 280px);
    height:auto;
    display:block;
    margin: 0 auto;
}

/* Kontakt direkt unter dem QR – lila */
.contact{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:.6rem;
    flex-wrap:wrap;
}
.contact-link{
    color: var(--accent);
    font-weight:800;
    text-decoration:none;
    border-bottom:1px dashed transparent;
    transition: color .2s ease, border-color .2s ease;
}
.contact-link:hover{ color:var(--accent-2); border-color:var(--accent-2) }
.dot{ color:#cbd5e1 }

/* Fokus-A11y */
:focus-visible{
    outline: 3px solid rgba(140,44,171,.45);
    outline-offset: 3px;
    border-radius: 6px;
}