@font-face{font-family:'Barlow';src:url('../fonts/barlow-400.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-500.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Barlow';src:url('../fonts/barlow-700.woff2') format('woff2');font-weight:700;font-display:swap}
:root{--blau1:#0b2740;--blau2:#123b60;--blau3:#17497a;--akzent:#3D8FD3;--akzent2:#2f83d8;--tinte:#2e3540;--kopfblau:#123b60;--muted:#98a1ad;--linie:#e3e7ec;--r:14px}
*{margin:0;padding:0;box-sizing:border-box}
body{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:linear-gradient(165deg,#081f33 0%,#123b60 45%,#1f5f9c 100%);font-family:'Barlow',Arial,Helvetica,sans-serif;padding:36px 16px 22px;overflow-x:hidden}
@media (min-width:701px) and (hover:hover){body{background-attachment:fixed}.foto-links,.foto-rechts{background-attachment:fixed}}
.foto-links{position:fixed;top:0;left:0;height:100vh;width:50vw;background:url('../img/foto-links.webp') center/cover no-repeat;opacity:.07;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(270deg,transparent 0%,#000 25%);mask-image:linear-gradient(270deg,transparent 0%,#000 25%)}
.foto-rechts{position:fixed;top:0;right:0;height:100vh;width:50vw;background:url('../img/foto-rechts.webp') center/cover no-repeat;opacity:.65;pointer-events:none;z-index:0;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 25%);mask-image:linear-gradient(90deg,transparent 0%,#000 25%)}
.deko{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.deko span{position:absolute;display:block;border-radius:99px}
.deko span:nth-child(3){top:7%;left:-10%;width:40%;height:2px;background:linear-gradient(90deg,transparent,rgba(143,196,240,.35),transparent);transform:rotate(-26deg)}
.deko span:nth-child(4){bottom:18%;left:-14%;width:52%;height:2px;background:linear-gradient(90deg,transparent,rgba(143,196,240,.55),transparent);transform:rotate(-26deg);box-shadow:0 0 14px rgba(111,177,232,.35)}
.buehne{position:relative;width:100%;max-width:520px;animation:rein .55s ease both}
@keyframes rein{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.karte-profil{margin-top:78px}
.avatar-ueberlapp{width:132px;height:132px;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:0 10px 26px rgba(0,0,0,.32);display:block;margin:-92px auto 12px}
.karten-kopf-mitte{text-align:center;margin-bottom:18px}
.karten-kopf-mitte h1{margin-bottom:4px}
.karten-kopf-mitte .lead{margin-bottom:0}
.karte-profil.lang .avatar-ueberlapp{margin-bottom:16px}
.karten-kopf-mitte .wortmarke-dunkel{height:40px;display:inline-block}
.liste{display:flex;flex-direction:column;gap:10px}
.link-karte{display:flex;align-items:center;gap:13px;background:#f7fafc;border:1px solid var(--linie);border-radius:11px;padding:11px 13px;text-decoration:none;transition:border-color .13s ease,background .13s ease}
.link-karte:hover{border-color:var(--akzent);background:#fff}
.icon-feld{width:44px;height:44px;border-radius:11px;flex:0 0 auto;display:grid;place-items:center;color:#fff}
.icon-feld svg{width:22px;height:22px;fill:currentColor}
.pf{min-width:0}
.pf-name{font-size:15.5px;font-weight:700;color:var(--kopfblau)}
.pf-handle{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cta{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:16px;background:var(--akzent2);color:#fff;font-size:15.5px;font-weight:700;border:0;border-radius:11px;padding:14px 16px;text-decoration:none;cursor:pointer;width:100%;font-family:inherit;box-shadow:0 10px 28px rgba(0,0,0,.28);transition:transform .14s ease,filter .14s ease}
.cta:hover{transform:translateY(-2px);filter:brightness(1.07)}
.cta svg{width:19px;height:19px;fill:currentColor}
.karte{background:#fff;border-radius:16px;padding:26px 26px 24px;box-shadow:0 18px 50px rgba(0,0,0,.35)}
.karte + .karte{margin-top:16px}
.karte h1{font-size:21px;font-weight:700;color:var(--kopfblau);margin-bottom:6px}
.karte h2{font-size:16px;font-weight:700;color:var(--kopfblau);margin-bottom:12px}
.karte .lead{font-size:14px;color:var(--muted);margin-bottom:18px}
.fehler{background:#fdecec;border:1px solid #f3c1c1;color:#a33;border-radius:10px;padding:10px 13px;font-size:13.5px;margin-bottom:16px}
.betraege{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px}
.betrag{padding:11px 4px;border:1px solid var(--linie);background:#f7fafc;border-radius:10px;color:var(--tinte);font-family:inherit;font-size:14.5px;font-weight:700;cursor:pointer;text-align:center;transition:.12s}
.betrag:hover{border-color:var(--akzent)}
.betrag.an{background:rgba(61,143,211,.12);border-color:var(--akzent);color:var(--akzent2)}
.feld{margin-bottom:13px}
.feld label{display:block;font-size:12px;font-weight:500;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.feld input,.feld textarea{width:100%;background:#f7fafc;border:1px solid var(--linie);border-radius:10px;color:var(--tinte);font:inherit;font-size:14.5px;padding:12px 13px}
.feld textarea{resize:vertical;min-height:70px}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--akzent)}
.hinweis{text-align:center;font-size:12px;color:var(--muted);margin-top:10px}
.lang h1{font-size:22px;margin-bottom:14px}
.lang h2{font-size:15.5px;margin:18px 0 6px}
.lang p{font-size:14px;line-height:1.7;color:var(--tinte);margin-bottom:10px}
.lang a{color:var(--akzent2);text-decoration:none}
.lang a:hover{text-decoration:underline}
.zurueck{display:inline-block;margin-top:6px;font-size:13.5px;color:var(--akzent2);text-decoration:none}
.zurueck:hover{text-decoration:underline}
.mitte{text-align:center}
.fuss{position:relative;margin-top:26px;text-align:center;font-size:12.5px;line-height:1.8;color:rgba(255,255,255,.55)}
.fuss a{color:rgba(255,255,255,.65);text-decoration:none;font-weight:500}
.fuss a:hover{color:#fff;text-decoration:underline}
@media (max-width:900px){.foto-links{display:none}.foto-rechts{width:70vw;opacity:.5}}
@media (max-width:700px){.foto-links{display:none}.foto-rechts{width:100vw;height:32vh;top:0;opacity:.4;background-position:center top;-webkit-mask-image:linear-gradient(180deg,#000 45%,transparent 100%);mask-image:linear-gradient(180deg,#000 45%,transparent 100%)}body{padding:20px 16px 22px}.karte-profil{margin-top:0}.karte{padding:22px 18px 20px}}
@media (max-width:420px){.betraege{grid-template-columns:repeat(3,1fr)}.avatar-ueberlapp{width:116px;height:116px;margin:-84px auto 12px}.karten-kopf-mitte .wortmarke-dunkel{height:34px}.icon-feld{width:40px;height:40px}.pf-name{font-size:14.5px}.pf-handle{font-size:12px}}
@media (prefers-reduced-motion:reduce){.buehne{animation:none}.link-karte,.cta{transition:none}}