/* Neumann-Neudamm CI – Linkseite */
@font-face{font-family:'Roboto Slab';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/roboto-slab-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Roboto Slab';font-weight:700;font-style:normal;font-display:swap;src:url(fonts/roboto-slab-latin-700-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:400;font-style:normal;font-display:swap;src:url(fonts/poppins-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:500;font-style:normal;font-display:swap;src:url(fonts/poppins-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-weight:600;font-style:normal;font-display:swap;src:url(fonts/poppins-latin-600-normal.woff2) format('woff2')}

:root{
  --green:#067030; --green-90:#1F7E45; --green-60:#6AA983;
  --green-20:#CDE2D6; --green-10:#E6F1EA; --ink:#1a1a1a; --muted:#5f6660; --white:#fff;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--green-10)}
body{font-family:'Poppins','Helvetica Neue',Arial,sans-serif;color:var(--ink);
     min-height:100vh;display:flex;flex-direction:column;align-items:center;
     -webkit-font-smoothing:antialiased}

/* Titelbild */
.hero{width:100%;height:280px;overflow:hidden;background:var(--green)}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center 60%;display:block;
     animation:kenburns 24s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12) translateY(-2%)}}
@media (min-width:700px){.hero{height:360px}}

main{width:100%;max-width:480px;padding:0 16px;margin-top:-96px;flex:1;position:relative}

/* Profilkarte – Logo steht auf ruhiger weißer Fläche (CI-Regel) */
.card{background:var(--white);border-radius:6px;box-shadow:0 20px 40px -24px rgba(0,40,15,.35);padding:32px 24px 26px;text-align:center}
.card .logo{width:150px;height:auto;display:block;margin:0 auto 22px}
.card h1{font-family:'Roboto Slab',Georgia,serif;font-weight:700;font-size:1.3rem;color:var(--green)}
.card p{font-size:.88rem;color:var(--muted);margin-top:6px;line-height:1.5}

.social{display:flex;justify-content:center;gap:14px;margin-top:20px;flex-wrap:wrap}
.social a{width:46px;height:46px;border-radius:50%;background:var(--green);
          display:flex;align-items:center;justify-content:center;
          transition:transform .4s cubic-bezier(.2,.9,.3,1.5),background .25s,box-shadow .3s}
.social a:hover,.social a:focus-visible{background:var(--green-90);transform:translateY(-4px) scale(1.15);
          box-shadow:0 10px 18px -8px rgba(6,112,48,.6);outline:none}
.social a:active{transform:scale(.95)}
.social svg{width:22px;height:22px;fill:#fff}

/* Abschnitte */
h2{font-family:'Roboto Slab',Georgia,serif;font-weight:700;font-size:.78rem;
   text-transform:uppercase;letter-spacing:.14em;color:var(--green);
   margin:32px 4px 12px;display:flex;align-items:center;gap:12px}
h2::after{content:"";flex:1;height:1px;background:var(--green-20)}

.links{list-style:none;display:flex;flex-direction:column;gap:10px}
.btn{position:relative;overflow:hidden;display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink);
     background:var(--white);border:1.5px solid var(--green-20);border-radius:6px;
     padding:15px 18px;will-change:transform;
     transition:transform .35s cubic-bezier(.2,.9,.3,1.3),box-shadow .35s ease,border-color .25s,background .25s}
.btn:hover,.btn:focus-visible{transform:scale(1.035) translateY(-2px);border-color:var(--green);outline:none;
     box-shadow:0 14px 28px -12px rgba(6,112,48,.45)}
.btn:active{transform:scale(.98);transition-duration:.1s}
/* grüner Lichtstreifen, der beim Hover durchläuft */
.btn::before{content:"";position:absolute;inset:0;left:-60%;width:40%;
     background:linear-gradient(100deg,transparent,rgba(6,112,48,.08),transparent);
     transform:skewX(-20deg);transition:left .7s ease;pointer-events:none}
.btn:hover::before{left:120%}
.btn.primary::before{background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent)}
.btn .txt{flex:1;min-width:0}
.btn strong{display:block;font-family:'Roboto Slab',Georgia,serif;font-weight:700;font-size:1rem;line-height:1.3}
.btn small{display:block;font-size:.78rem;color:var(--muted);margin-top:2px;line-height:1.4}
.btn .arr{flex:none;width:18px;height:18px;stroke:var(--green);fill:none;stroke-width:2;transition:transform .35s cubic-bezier(.2,.9,.3,1.3)}
.btn:hover .arr{transform:translateX(6px)}
.btn strong{transition:color .25s}
.btn:not(.primary):hover strong{color:var(--green)}
.btn.primary{background:var(--green);border-color:var(--green);color:#fff}
.btn.primary small{color:var(--green-20)}
.btn.primary .arr{stroke:#fff}
.btn.primary:hover,.btn.primary:focus-visible{background:var(--green-90);border-color:var(--green-90)}
.ico{flex:none;width:36px;height:36px;border-radius:50%;background:var(--green-10);
     display:flex;align-items:center;justify-content:center;
     transition:background .3s,transform .45s cubic-bezier(.2,.9,.3,1.4)}
.ico svg{width:18px;height:18px;fill:var(--green);transition:fill .3s}
.btn:not(.primary):hover .ico{background:var(--green);transform:rotate(-10deg) scale(1.1)}
.btn:not(.primary):hover .ico svg{fill:#fff}
.btn.primary .ico{background:rgba(255,255,255,.15)}
.btn.primary .ico svg{fill:#fff}

footer{width:100%;max-width:480px;padding:40px 16px 32px;text-align:center;font-size:.75rem}
footer a{color:var(--muted);text-decoration:none;margin:0 8px;display:inline-block;padding:4px 0}
footer a:hover{color:var(--green);text-decoration:underline}
footer .copy{color:var(--muted);margin-top:10px;opacity:.8}

/* Einblenden beim Laden */
.fade{opacity:0;transform:translateY(18px);animation:fadeup .7s cubic-bezier(.2,.8,.2,1) forwards;
      animation-delay:calc(var(--i,0) * 70ms + 150ms)}
@keyframes fadeup{to{opacity:1;transform:none}}
.card .logo{transition:transform .5s cubic-bezier(.2,.9,.3,1.3)}
.card:hover .logo{transform:scale(1.05)}

/* Wer Animationen im System abgeschaltet hat, bekommt eine ruhige Seite */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .fade{opacity:1;transform:none}
}