:root{--ug-merch:#CFD600;--ug-sports:#C11F66;--ug-textil:#006A78;--ug-technik:#132C3F;--ug-marketing:#7556A4;--ug-more:#D9782D;--ink:#132C3F;--text:#2b3440;--muted:#6b7684;--line:#e4e8ee;--bg:#f4f6f9;--card:#fff;--ok:#2e9d58;--warn:#e0a100;--err:#d63638}
*{box-sizing:border-box}
html,body{margin:0}
body.ugp-body{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--ugp-accent,#006A78)}
.ugp-wrap{max-width:1180px;margin:0 auto;padding:0 20px}
.ugp-stripe{display:flex;height:5px}.ugp-stripe i{flex:1}
.ugp-stripe i:nth-child(1){background:var(--ug-merch)}.ugp-stripe i:nth-child(2){background:var(--ug-sports)}.ugp-stripe i:nth-child(3){background:var(--ug-textil)}.ugp-stripe i:nth-child(4){background:var(--ug-technik)}.ugp-stripe i:nth-child(5){background:var(--ug-marketing)}.ugp-stripe i:nth-child(6){background:var(--ug-more)}
.ugp-header{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.ugp-header__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px;flex-wrap:wrap}
.ugp-brand{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.ugp-brand__kunde{max-height:38px;max-width:150px;object-fit:contain}
.ugp-brand__sep{width:1px;height:28px;background:var(--line)}
.ugp-brand__ug{font-size:14px;color:var(--muted)}.ugp-brand__ug b{color:var(--ink);font-weight:800;font-size:17px;margin-right:4px}
.ugp-nav{display:flex;align-items:center;gap:18px;font-size:14px;flex-wrap:wrap}
.ugp-nav a{color:var(--text);text-decoration:none;font-weight:500}.ugp-nav a:hover{color:var(--ugp-accent)}
.ugp-nav__user{color:var(--muted);padding-left:14px;border-left:1px solid var(--line)}
.ugp-nav__out{color:var(--muted)!important}
.ugp-teambar{background:#fff7d6;border-bottom:1px solid #f0e2a4;color:#6b5600;font-size:13px;padding:8px 16px;display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap}
.ugp-teambar form{margin:0}.ugp-teambar select{font:inherit;padding:3px 6px;border-radius:6px;border:1px solid #e5d48a;background:#fff}
.ugp-teambar a{color:#6b5600;font-weight:700}
.ugp-main{padding:34px 20px 60px;min-height:62vh}
.ugp-footer{border-top:1px solid var(--line);background:#fff;font-size:13px;color:var(--muted)}
.ugp-footer .ugp-wrap{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:18px;padding-bottom:18px}
.ugp-box{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;box-shadow:0 1px 2px rgba(19,44,63,.04)}
.ugp-box--flush{padding:0;overflow:hidden}
.ugp-box h2,.ugp-box h3{margin:0 0 12px;color:var(--ink)}
.ugp-empty{color:var(--muted);text-align:center;padding:30px}
.ugp-eyebrow{text-transform:uppercase;letter-spacing:.08em;font-size:12px;font-weight:700;color:var(--ugp-accent,#006A78);margin-bottom:6px}
.ugp-hello h1,.ugp-h1{font-size:28px;line-height:1.25;margin:0 0 8px;color:var(--ink);font-weight:800;letter-spacing:-.01em}
.ugp-hello{margin-bottom:24px}
.ugp-lead{font-size:16px;color:var(--muted);max-width:760px;margin:0 0 22px}
.ugp-muted{color:var(--muted);font-size:13px}
.ugp-crumbs{font-size:13px;color:var(--muted);margin-bottom:10px}.ugp-crumbs a{color:var(--muted)}
.ugp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;margin-bottom:38px}
.ugp-tile{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-decoration:none;color:var(--text);transition:transform .15s,box-shadow .15s,border-color .15s}
.ugp-tile:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(19,44,63,.1);border-color:var(--ugp-accent)}
.ugp-tile__img{height:130px;background:linear-gradient(135deg,color-mix(in srgb,var(--ugp-accent) 16%,#fff),#fff);display:flex;align-items:center;justify-content:center;border-bottom:3px solid var(--ugp-accent)}
.ugp-tile__img img{max-width:100%;max-height:130px;object-fit:contain}
.ugp-tile__img span{font-size:46px}
.ugp-tile__body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.ugp-tile__body h3{margin:0 0 6px;color:var(--ink);font-size:18px}
.ugp-tile__body p{margin:0 0 16px;color:var(--muted);font-size:14px;flex:1}
.ugp-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--ugp-accent,#006A78);color:#fff!important;border:0;border-radius:9px;padding:11px 18px;font-weight:600;font-size:15px;text-decoration:none;cursor:pointer;font-family:inherit}
.ugp-btn:hover{filter:brightness(1.08)}
.ugp-btn--small{padding:8px 14px;font-size:14px;align-self:flex-start}
.ugp-btn--big{width:100%;padding:15px 20px;font-size:16px;margin-top:8px}
.ugp-btn--ghost{background:transparent;color:var(--ugp-accent)!important;border:1.5px solid var(--ugp-accent)}
.ugp-section-head{display:flex;align-items:baseline;justify-content:space-between;margin:8px 0 12px}
.ugp-section-head h2{margin:0;font-size:20px;color:var(--ink)}
.ugp-section-head a{font-size:14px}
.ugp-table{width:100%;border-collapse:collapse;font-size:14px}
.ugp-table th{text-align:left;font-weight:600;color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.05em;padding:12px 16px;background:#fafbfc;border-bottom:1px solid var(--line)}
.ugp-table td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
.ugp-table tr:last-child td{border-bottom:0}
.ugp-table a{text-decoration:none}
.ugp-right{text-align:right}
.ugp-link{font-size:13px;font-weight:600}
.ugp-pill{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:600;padding:4px 11px 4px 9px;border-radius:999px;white-space:nowrap}
.ugp-pill i{width:9px;height:9px;border-radius:50%;display:inline-block}
.ugp-pill--rot{background:#fdeaea;color:#a8282a}.ugp-pill--rot i{background:var(--err);box-shadow:0 0 0 3px #f9cfcf}
.ugp-pill--gelb{background:#fff6dc;color:#8a6400}.ugp-pill--gelb i{background:var(--warn);box-shadow:0 0 0 3px #fbe7a8}
.ugp-pill--gruen{background:#e6f5ec;color:#1f7442}.ugp-pill--gruen i{background:var(--ok);box-shadow:0 0 0 3px #c7ead4}
.ugp-pill--grau{background:#eef0f2;color:#5b6168}.ugp-pill--grau i{background:#8c8f94}
.ugp-alert{background:#eef7f8;border:1px solid #cfe6e9;color:#1d5961;border-radius:10px;padding:12px 16px;margin-bottom:18px;font-size:14px}
.ugp-alert--err{background:#fdeeee;border-color:#f3c9c9;color:#8f2325}
.ugp-alert--ok{background:#e9f6ee;border-color:#c5e7d2;color:#1f6b3f}
/* Bestellformular */
.ugp-order{display:grid;grid-template-columns:1fr;gap:26px;align-items:start}
.ugp-order--preview{grid-template-columns:minmax(0,1fr) minmax(0,460px)}
.ugp-field{margin-bottom:18px}
.ugp-field>label{display:block;font-weight:600;color:var(--ink);font-size:14px;margin-bottom:6px}
.ugp-field small{display:block;color:var(--muted);font-size:12px;margin-top:5px}
.ugp-req{color:var(--err)}
.ugp-field input[type=text],.ugp-field input[type=email],.ugp-field input[type=tel],.ugp-field input[type=number],.ugp-field input[type=date],.ugp-field select,.ugp-field textarea{width:100%;font:inherit;font-size:15px;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px;background:#fff;color:var(--text);transition:border-color .15s,box-shadow .15s}
.ugp-field input:focus,.ugp-field select:focus,.ugp-field textarea:focus{outline:0;border-color:var(--ugp-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ugp-accent) 18%,transparent)}
.ugp-chips{display:flex;gap:10px;flex-wrap:wrap}
.ugp-chip input{position:absolute;opacity:0;pointer-events:none}
.ugp-chip span{display:inline-block;padding:10px 18px;border:1.5px solid var(--line);border-radius:9px;font-weight:600;cursor:pointer;background:#fff}
.ugp-chip input:checked+span{border-color:var(--ugp-accent);background:color-mix(in srgb,var(--ugp-accent) 10%,#fff);color:var(--ugp-accent)}
.ugp-chip input:focus-visible+span{box-shadow:0 0 0 3px color-mix(in srgb,var(--ugp-accent) 25%,transparent)}
.ugp-sizes{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:10px}
.ugp-size{display:flex;flex-direction:column;align-items:center;border:1.5px solid var(--line);border-radius:9px;padding:8px;background:#fff}
.ugp-size span{font-weight:700;font-size:13px;color:var(--ink);margin-bottom:4px}
.ugp-size input{width:100%;text-align:center;border:0;font:inherit;font-size:16px;padding:4px;background:#f6f8fa;border-radius:6px}
.ugp-sum{font-weight:600;color:var(--ink)!important}
.ugp-sticky{position:sticky;top:96px}
/* Visitenkarte */
.ugp-card{--ugp-accent:#006A78;position:relative;aspect-ratio:85/55;background:#fff;border-radius:10px;box-shadow:0 14px 34px rgba(19,44,63,.16),0 2px 6px rgba(19,44,63,.08);overflow:hidden;padding:7% 7%;display:grid;grid-template-columns:1fr;grid-template-rows:auto 1fr;font-family:"PT Sans Narrow","Arial Narrow",Inter,sans-serif;margin:8px 0 14px;container-type:inline-size}
.ugp-card__deco{position:absolute;right:0;top:0;bottom:0;width:13%}
.ugp-card__deco span{position:absolute;top:0;bottom:0;background:var(--ugp-accent)}
.ugp-card__deco span:nth-child(1){right:0;width:100%;opacity:.16}
.ugp-card__deco span:nth-child(2){right:0;width:70%;opacity:.22;top:12%}
.ugp-card__deco span:nth-child(3){right:0;width:42%;opacity:.38;top:30%}
.ugp-card__logo{height:24cqw;max-height:120px;display:flex;align-items:center}
.ugp-card__logo img{max-height:100%;max-width:62%;object-fit:contain}
.ugp-card__text{align-self:end;padding-left:36%;padding-right:14%;color:#6b7280;font-size:3.35cqw;line-height:1.32}
.ugp-card__name{color:#374151;font-weight:700;font-size:4.3cqw;line-height:1.2}
.ugp-card__name:empty::before{content:"Vorname Nachname";opacity:.35}
.ugp-card__funktion{margin-bottom:2.6cqw}
.ugp-card__zeilen{white-space:normal}
/* Detail */
.ugp-detail-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.ugp-steps{list-style:none;display:flex;gap:0;padding:0;margin:8px 0 26px;counter-reset:s}
.ugp-steps li{flex:1;position:relative;padding-top:30px;font-weight:600;color:var(--muted);font-size:14px}
.ugp-steps li small{display:block;font-weight:500;color:var(--muted)}
.ugp-steps li span{position:absolute;top:0;left:0;width:20px;height:20px;border-radius:50%;background:#dfe3e8;border:3px solid #fff;box-shadow:0 0 0 1px #dfe3e8;z-index:1}
.ugp-steps li::before{content:"";position:absolute;top:9px;left:0;right:0;height:3px;background:#dfe3e8}
.ugp-steps li.is-done{color:var(--ink)}
.ugp-steps li.is-done span{background:var(--ugp-accent);box-shadow:0 0 0 1px var(--ugp-accent)}
.ugp-steps li.is-done::before{background:var(--ugp-accent)}
.ugp-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:26px;align-items:start}
.ugp-kv{width:100%;border-collapse:collapse;font-size:14px;margin-bottom:18px}
.ugp-kv th{text-align:left;font-weight:500;color:var(--muted);padding:8px 12px 8px 0;width:38%;vertical-align:top;border-bottom:1px solid var(--line)}
.ugp-kv td{padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink)}
/* Login */
.ugp-login{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,420px);gap:44px;align-items:center;padding:30px 0}
.ugp-login__intro h1{font-size:38px;line-height:1.15;color:var(--ink);margin:0 0 14px;font-weight:800;letter-spacing:-.02em}
.ugp-login__intro p{font-size:17px;color:var(--muted);max-width:520px}
.ugp-check{list-style:none;padding:0;margin:20px 0 0}
.ugp-check li{padding-left:30px;position:relative;margin:10px 0;font-weight:500;color:var(--ink)}
.ugp-check li::before{content:"✓";position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;background:var(--ug-textil);color:#fff;font-size:12px;display:flex;align-items:center;justify-content:center}
.ugp-check li:nth-child(2)::before{background:var(--ug-marketing)}.ugp-check li:nth-child(3)::before{background:var(--ug-sports)}
.ugp-login__form label{display:block;font-weight:600;font-size:14px;color:var(--ink);margin-bottom:6px}
.ugp-login__form input[type=text],.ugp-login__form input[type=password]{width:100%;font:inherit;padding:11px 13px;border:1.5px solid var(--line);border-radius:9px}
.ugp-login__form input[type=text]:focus,.ugp-login__form input[type=password]:focus{outline:0;border-color:var(--ug-textil);box-shadow:0 0 0 3px rgba(0,106,120,.15)}
.ugp-login__form p{margin:0 0 14px}
.ugp-login__form .login-remember label{font-weight:400;display:flex;gap:8px;align-items:center}
.ugp-login__form input[type=submit]{width:100%;background:var(--ug-textil);color:#fff;border:0;border-radius:9px;padding:13px;font:inherit;font-weight:700;cursor:pointer}
@media (max-width:900px){.ugp-order--preview,.ugp-two,.ugp-login{grid-template-columns:1fr}.ugp-order__preview{order:-1}.ugp-sticky{position:static}.ugp-login__intro h1{font-size:30px}}
@media (max-width:700px){.ugp-hello h1,.ugp-h1{font-size:23px}.ugp-nav__user{display:none}
.ugp-table thead{display:none}.ugp-table tr{display:block;border-bottom:1px solid var(--line);padding:8px 0}.ugp-table td{display:flex;justify-content:space-between;gap:12px;border:0;padding:6px 16px}.ugp-table td::before{content:attr(data-l);color:var(--muted);font-size:12px}.ugp-right{justify-content:flex-end!important}.ugp-right::before{content:none!important}}
/* Startseite */
body.ugp-body{overflow-x:hidden}
.ugp-login{position:relative}
.ugp-login::before{content:"";position:absolute;inset:-40px -10vw auto;height:520px;z-index:-1;background:radial-gradient(420px 260px at 8% 20%,rgba(207,214,0,.22),transparent 70%),radial-gradient(380px 260px at 42% 0%,rgba(193,31,102,.13),transparent 70%),radial-gradient(420px 300px at 92% 30%,rgba(117,86,164,.16),transparent 70%),radial-gradient(360px 240px at 60% 90%,rgba(0,106,120,.14),transparent 70%)}
.ugp-login__intro h1{background:linear-gradient(90deg,#132C3F 0%,#132C3F 55%,#7556A4 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ugp-mock{margin-top:28px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px rgba(19,44,63,.10);padding:6px 16px;max-width:520px;transform:rotate(-1deg)}
.ugp-mock__row{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}
.ugp-mock__row:last-child{border-bottom:0}
.ugp-mock__row>span:nth-child(2){flex:1;display:flex;flex-direction:column;font-size:14px;color:var(--ink)}
.ugp-mock__row small{color:var(--muted);font-size:12px}
.ugp-mock__ic{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:19px;background:color-mix(in srgb,var(--c) 16%,#fff)}
.ugp-login__form{box-shadow:0 18px 40px rgba(19,44,63,.10);border-top:5px solid var(--ug-textil)}
.ugp-steps3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:20px 0 26px}
.ugp-step3{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px;position:relative;overflow:hidden}
.ugp-step3::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:var(--c)}
.ugp-step3 span{display:inline-flex;width:34px;height:34px;border-radius:50%;align-items:center;justify-content:center;font-weight:800;background:color-mix(in srgb,var(--c) 22%,#fff);color:var(--ink);margin-bottom:10px}
.ugp-step3 h3{margin:0 0 6px;color:var(--ink);font-size:17px}
.ugp-step3 p{margin:0;color:var(--muted);font-size:14px}
.ugp-worlds{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:6px 0 0}
.ugp-worlds span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:color-mix(in srgb,var(--c) 14%,#fff);color:var(--ink);border:1px solid color-mix(in srgb,var(--c) 40%,#fff)}
@media (max-width:900px){.ugp-steps3{grid-template-columns:1fr}.ugp-mock{transform:none}}