/* ===== UCP Top Tabs ================================================== */
.ucp-header{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:flex-start;
  background: var(--tbl-main-tr);
  border:1px solid var(--hairline);
  padding:12px;
  margin-bottom:16px;
}

.ucp-userinfo{
display: flex;
    gap: 12px;
    align-items: center;
    flex: 1 1 60px;
    flex-direction: column;
}
.ucp-userinfo img{ 
  width: 200px;
  border:2px solid var(--design);
  height: 240px;
}
.ucp-userinfo__name{
  font-size: var(--txtxl);
  font-weight:700;
  color: var(--akzent-hell);
  font-family: var(--akzenttext);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ucp-userinfo__meta{
  line-height:1.5;
  font-size: var(--txtxsmall);
  color: var(--txtcol);
}

.ucp-header .ucp-tabs{
  flex:2 1 400px;
  align-self:flex-start;
  margin:0;
}

/* Mobile: untereinander */
@media (max-width:800px){
  .ucp-header{ flex-direction:column; }
  .ucp-header .ucp-tabs{ width:100%; }
}


.ucp-tabs.ucp-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 12px;
    padding: 8px;
    flex-direction: row;
align-items: flex-start; }

.ucp-tab{
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 10px;
  background: var(--tbl-main-tr);
  color: var(--akzent-hell);
  text-decoration:none;
  text-transform:uppercase;
  font-size: var(--txtxxsmall);
  letter-spacing:.2em;
  transition: transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease;
align-self:stretch; 
}
.ucp-tab .i{ width:16px; height:16px; display:inline-block; }
.ucp-tab:hover{ background: var(--tbl-main-tr); color: var(--design); transform: translateY(-1px); }
.ucp-tab.is-active{
  border-color: color-mix(in srgb, var(--hairline) 60%, var(--design));
  box-shadow: inset 0 0 0 1px var(--design);
  color: var(--design);
}

/* ===== UCP Cards & Summary ========================================== */
.ucp-wrap{ display:flex; flex-direction:column; gap:12px; }

.ucp-card{ border:1px solid var(--hairline); background: var(--tbl-main-tr); }
.ucp-card__head{
  padding:8px 12px; background: var(--tbl-main);
  color: var(--design); border-bottom:1px solid var(--hairline);
  font-family: var(--akzenttext); text-transform:uppercase; letter-spacing:.25em;
  font-size: var(--txts);
}
.ucp-card__body{ padding:12px; }

.ucp-summary{ display:grid; grid-template-columns: 100px 1fr; gap:12px; align-items:start; }
.ucp-summary__main{ line-height:1.5; }

@media (max-width: 700px){
  .ucp-summary{ grid-template-columns: 1fr; }
}

.ucp-tabgroup{ 
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    flex-direction: column;
    justify-content: flex-start;
    width: 20%; }
.ucp-tabgroup__title{
  align-self:stretch; display:flex; align-items:center;
  padding:6px 10px; margin-right:4px;
  background:var(--tbl-main); border:1px solid var(--hairline);
  color:var(--design); font-family:var(--akzenttext);
  text-transform:uppercase; letter-spacing:.2em; font-size:var(--txtm);
}
.ucp-tab{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; background:var(--tbl-main); border:1px solid var(--hairline); color:var(--akzent-hell); text-decoration:none; text-transform:uppercase; font-size:var(--txtxxsmall); letter-spacing:.2em; transition:.15s; }
.ucp-tab .i{ width:16px; height:16px; }
.ucp-tab:hover{ background:var(--tbl-main-tr); color:var(--design); transform:translateY(-1px); }
.ucp-tab.is-active{ border-color:color-mix(in srgb, var(--hairline) 60%, var(--design)); box-shadow:inset 0 0 0 1px var(--design); color:var(--design); }

/* Mobile: Gruppen umbrechen */
@media (max-width: 800px){
  .ucp-tabgroup{ width:100%; }
}